如何在Web Components中引入外部CSS样式？

1. 一、@import
2. 二、::part
• 示例代码
3. 三、var
• 示例代码
4. 四、通过属性传入
• 示例代码
5. 五、自定义组件内部定义修改样式函数
• 示例代码
6. 六、通过 slot 外部设置样式
• 示例代码
7. 七、fetch 获取
8. 八、CSS module import

我们在做前端开发时，还是会遇到需要引入外部 CSS 到 Shadow DOM 情况，那么如何处理呢？本文就就最近遇到的情况给出如下几种方案，希望对大家有用。

一、@import

示例代码：

const template = document.createElement('template');

class WhatsUp extends HTMLElement {
  connectedCallback() {
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innderHTML = `
      <style>
          @import "./index.css"; // 核心代码
      </style>
      <div>Sup</div>
    `
  }
}

window.customElements.define('whats-up', WhatsUp);

优点：此方法兼容性非常好。

结语

以上就是分享的关于前端开发中如何在 Web Components 中引入外部 CSS 样式的 8 种方法，各种方法适用场景各不相同，所以大家小心食用，感谢阅读。