Web Components 引入外部 CSS 的方法探秘

2023-10-05 18:12:18







## 正文

在开发过程中，我们经常会遇到需要将外部 CSS 引入 Shadow DOM 的情况。Shadow DOM 是 Web Components 的核心技术之一，它允许组件创建自己的私有作用域，以确保样式和脚本不会与页面其他部分发生冲突。

### 九种引入外部 CSS 的方法

1. **@import** ：

   优点：兼容性好，可以跨浏览器使用。

   缺点：不能在 Shadow DOM 中使用。

   示例代码：

   ```html
   <link rel="import" href="my-component.html">
   <style>
     @import url(my-component.css);
   </style>

link ：

优点：可以在 Shadow DOM 中使用，兼容性好。

缺点：需要创建一个额外的 HTML 文件。

示例代码：
```
<link rel="import" href="my-component.html">
<link rel="stylesheet" href="my-component.css">
```
style ：

优点：可以在 Shadow DOM 中使用，不需要创建额外的 HTML 文件。

缺点：兼容性较差，在某些浏览器中可能无法正常工作。

示例代码：
```
<link rel="import" href="my-component.html">
<style>
  :host {
    color: red;
  }
</style>
```

HTMLImports ：

优点：兼容性好，可以跨浏览器使用。

缺点：需要创建一个额外的 HTML 文件。

示例代码：

<html>
  <head>
    <link rel="import" href="my-component.html">
    <link rel="stylesheet" href="my-component.css">
  </head>
  <body>
    <my-component></my-component>
  </body>
</html>

ShadyCSS ：

优点：可以跨浏览器使用，无需创建额外的 HTML 文件。

缺点：需要使用 Polymer 库。

示例代码：

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="my-component.html">
<style>
  :host {
    color: red;
  }
</style>

Custom CSS Properties ：

优点：可以跨浏览器使用，无需创建额外的 HTML 文件。

缺点：需要使用 CSS 变量。

示例代码：
```
<link rel="import" href="my-component.html">
<style>
  :host {
    --my-color: red;
    color: var(--my-color);
  }
</style>
```

CSS Shadow Parts ：

优点：可以跨浏览器使用，无需创建额外的 HTML 文件。

缺点：需要使用 CSS Shadow Parts。

示例代码：

<link rel="import" href="my-component.html">
<style>
  :host {
    --my-color: red;
  }

  #my-shadow-part {
    color: var(--my-color);
  }
</style>

Scoped CSS ：

优点：可以跨浏览器使用，无需创建额外的 HTML 文件。

缺点：需要使用 Sass 或 Less 等预处理器。

示例代码：
```
:host {
  @apply --my-theme;
}
```

CSS Modules ：

优点：可以跨浏览器使用，无需创建额外的 HTML 文件。

缺点：需要使用 CSS Modules 库。

示例代码：

import styles from './my-component.css';

class MyComponent extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({mode: 'open'});
    const style = document.createElement('style');
    style.textContent = styles;
    shadow.appendChild(style);

    // ...
  }
}

customElements.define('my-component', MyComponent);