在 web 组件中导入很棒的字体

Answer 1

由于您的 Web 组件中未加载字体超棒的图标字体，因此未显示图标。要解决这个问题，您可以使用模板中的链接标签在 Web 组件中加载超棒的字体。

修改模板的方法如下：

const template = document.createElement("template");
template.innerHTML = `
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-jkihXtPklFJy8q3rnoEMBstczhBwFwO48lEQ7EDKlA5JX7xu5Q0NVg7lLeK/cHhV7hly0iygDRNyo6N88U6B9g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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>`;

Answer 2

要在 shadowDOM 中使用，您需要在 shadowDOM 和 globalDOM 中加载 CSS。

让你的组件检查链接是否存在于 globalDOM 中，
如果不; Web 组件添加 href

customElements.define('my-fa-element', class extends HTMLElement {
  constructor() {
    let href = "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css";
    super().attachShadow({mode:'open'})
           .innerHTML = `<style>@import url('${href}')</style>`+
           [`check`,`square-check`,`circle-check`,`gear`]
             .map(icon=>`fa-${icon}: <i class="fa fa-${icon}"></i><br>`).join("");
    if (!document.querySelector(`link[href="${href}"]`)) {
      document.head.append(
        Object.assign(document.createElement("link"), {
          rel: "stylesheet",
          href
        }))
    };
  }
});

<my-fa-element></my-fa-element>