将fontawesome添加到web组件的shadowroot中

Question

我创建了一个用于创建 Web 组件的 JS 脚本。该 Web 组件使用 Font Awesome 图标。当我将 Font Awesome 库添加到 HTML 的头部时，图标可以正常工作。但我不希望将它们添加到 HTML 中，我希望它们位于我的组件的 Shadowdom 中。

我的 JS 文件有一个 render() 函数，其中包含所有 HTML。我还添加了 font Awesome css 的获取，但这不起作用。我也尝试过简单地链接到那里的 css，但这也不起作用。

下面是我的代码的最小示例：

render() {
    fetch('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css')
  .then(response => response.text())
  .then(cssText => {
    // Inject the CSS text into the shadow DOM's <head> element
    const shadowHead = this.shadowRoot.querySelector('head');
    const styleElement = document.createElement('style');
    styleElement.textContent = cssText;
    shadowHead.appendChild(styleElement);
  });
    // Create the component's structure and styles
    this.shadowRoot.innerHTML = `
      <head>
        <style>
        * {
          font-family: Arial, sans-serif;
        }

        .title {
          color: #366BAB;
          font-size: 1rem;
        }

        </style>
      </head>
      
      <div>
        <h1 class="title">Lorem ipsum</h1>
      </div>
      `;
  }

结果：

未添加CSS。出于测试目的，我创建了一个带有 .head 类的 div 并将 querySelector 更改为“.head”，CSS 添加到该 div 但未应用，图标无法以这种方式工作。

新发现：

它们的图标都显示为正方形，当我检查这样的正方形时，我发现实际的 CSS 已注入正确的链接。请看下面的截图

Answer 1

你必须问自己的第一个问题：我的 Web 组件真的需要 ShadowDOM 吗？

如果是这样，您必须在主文档和shadowDOM中加载FontAwesome

<fa-icon is="check"></fa-icon>
<fa-icon is="square-check"></fa-icon>
<fa-icon is="circle-check"></fa-icon>
<fa-icon is="gear"></fa-icon>

<script>
  let createElement = (tag, p = {}) => Object.assign(document.createElement(tag), p);
  customElements.define('fa-icon', class extends HTMLElement {
    constructor() {
      let version = "[email protected]";
      let href = `https://cdn.jsdelivr.net/npm/@fortawesome/${version}/css/all.min.css`;
      super()
        .attachShadow({mode:'open'})
        .innerHTML = `<style>@import url('${href}')</style><span></span>`;
      if (!document.querySelector(`link[href="${href}"]`)) 
        document.head.append(
          createElement("link", {
            rel: "stylesheet",
            href
          }));
    }
    connectedCallback() {
      this.style.display = "inline-block";
      this.icon = this.getAttribute("is");
    }
    set icon(icon){
      this.shadowRoot.querySelector("span").innerHTML = `<i class="fa fa-${icon}"></i>`;
    }
  });
</script>

将fontawesome添加到web组件的shadowroot中

问题描述投票：0回答：1

1个回答

最新问题

将fontawesome添加到web组件的shadowroot中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1