Web Components中引入外部CSS的 8 种方法

开发中，还是会遇到需要引入外部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);

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

二、::part

::part CSS 伪元素表示在阴影树中任何匹配 part 属性的元素。

示例代码

HTML

<template id="whats-up">
    <div part="sup">Sup</div>
    <div part="foo">Sup</div>
</template>

<whats-up></whats