Web Component中Font Awesome图标消失，求解决方法

问题场景 #

之前在普通HTML结构中，在body闭合标签前引入Font Awesome脚本后，头部组件的图标能正常显示；但将头部改造成使用Shadow DOM的Web Component后，图标消失，其他HTML内容渲染正常。

原因分析 #

Shadow DOM具有样式隔离的特性，外部文档加载的Font Awesome脚本和样式无法渗透到Shadow DOM内部，导致图标类名无法被解析渲染。

解决方法 #

方法一：在Web Component模板内引入Font Awesome脚本 #

直接在组件的template中添加Font Awesome的script标签，让Shadow DOM内部加载脚本，从而解析图标类名。修改后的header.js代码如下：

const template = document.createElement("template");
template.innerHTML = `
<script src="https://kit.fontawesome.com/my id.js" crossorigin="anonymous"></script>
<div class="icon-container">
      <ul>
        <li class="list-item"><i class="fa-regular fa-bell"></i></li>
        <li class="list-item"><i class="fa-solid fa-gear"></i></li>
        <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li>
      </ul>
</div>`;
class Header extends HTMLElement {
  constructor() {
    super();
    // 创建Shadow Root
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
window.customElements.define("header-section", Header);

注意：将类名header改为Header，遵循JavaScript类名大写开头的规范，避免与原生<header>标签冲突。

方法二：直接嵌入Font Awesome SVG图标 #

不依赖外部脚本，直接把对应图标的SVG代码嵌入到模板中，完全不受Shadow DOM隔离影响，同时还能减少外部依赖。示例代码：

const template = document.createElement("template");
template.innerHTML = `
<div class="icon-container">
      <ul>
        <li class="list-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
        </li>
        <li class="list-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </li>
        <li class="list-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
        </li>
      </ul>
</div>`;
class Header extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
window.customElements.define("header-section", Header);

你可以从Font Awesome官网直接复制对应图标的SVG代码，按需调整尺寸、颜色等样式。

内容的提问来源于stack exchange，提问作者James tan