CSS Shadow Parts：::part 伪元素跨越 Shadow DOM 边界的样式封装
大家好，今天我们来深入探讨一个非常重要的 CSS 特性：::part 伪元素。它允许我们穿透 Shadow DOM 的边界，对 Web Components 内部的特定元素进行样式定制。理解并掌握 ::part，对于创建可定制、可复用的 Web Components 来说至关重要。
1. 什么是 Shadow DOM？为什么需要 ::part？
在深入了解 ::part 之前，我们需要先回顾一下 Shadow DOM 的概念。
Shadow DOM 是一种 Web 标准，它允许我们将 HTML、CSS 和 JavaScript 封装在组件内部，使其与外部文档隔离开来。这种隔离性带来了许多好处：
- 样式隔离 (Style Encapsulation): 组件内部的样式不会影响外部文档，反之亦然。这避免了全局样式冲突，使得组件更加健壮和可预测。
- DOM 隔离 (DOM Encapsulation): 组件的内部 DOM 结构被隐藏起来，外部文档无法直接访问或修改。这增强了组件的封装性，防止了意外的破坏。
- 简化开发 (Simplified Development): 组件开发者可以放心地编写组件内部的代码，而不必担心与外部环境发生冲突。
举个简单的例子，我们可以创建一个自定义的 <my-button> 组件，并在其内部使用 Shadow DOM 来封装按钮的样式和行为：
<my-button>Click me</my-button>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' }); // 创建 Shadow DOM
this.shadowRoot.innerHTML = `
<style>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
<button>
<slot></slot>
</button>
`;
}
}
customElements.define('my-button', MyButton);
</script>在这个例子中，<my-button> 组件的 Shadow DOM 内部包含了一个 <button> 元素，并为其定义了蓝色背景和白色文字的样式。外部文档的 CSS 规则不会直接影响这个内部的 <button> 元素。
但是，如果我们希望允许用户定制这个 <my-button> 组件的样式呢？例如，我们可能希望用户能够修改按钮的背景颜色或文字颜色。这时候，Shadow DOM 的隔离性就变成了一个问题。
这就是 ::part 伪元素发挥作用的地方。它允许我们选择 Shadow DOM 内部的特定元素，并为其应用外部样式。
2. ::part 的语法和用法
::part 伪元素的语法非常简单：
element::part(part-name) {
/* 样式规则 */
}element：要选择的 Web Component 的标签名。例如，my-button。::part(part-name)：用于选择 Shadow DOM 内部具有part属性的元素。part-name：part属性的值，用于标识要选择的元素。
为了使用 ::part，我们需要在 Web Component 的 Shadow DOM 内部的元素上添加 part 属性。例如，我们可以修改上面的 <my-button> 组件，为内部的 <button> 元素添加 part 属性：
<script>
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
<button part="button"> <!-- 添加 part 属性 -->
<slot></slot>
</button>
`;
}
}
customElements.define('my-button', MyButton);
</script>现在，我们可以在外部 CSS 中使用 ::part 来定制这个 <button> 元素的样式：
my-button::part(button) {
background-color: red; /* 修改背景颜色为红色 */
color: yellow; /* 修改文字颜色为黄色 */
}这段 CSS 代码会将 <my-button> 组件内部的 <button> 元素的背景颜色修改为红色，文字颜色修改为黄色。
3. part 属性的命名规范和最佳实践
part 属性的命名非常重要，它决定了用户如何定制你的 Web Component 的样式。以下是一些命名规范和最佳实践：
- 使用有意义的名称：
part属性的名称应该清晰地描述所选择的元素的作用。例如，button、header、content、footer等。 - 使用小写字母：
part属性的名称应该使用小写字母，并可以使用连字符分隔单词。例如，main-content、submit-button。 - 避免使用通用名称： 避免使用过于通用的名称，例如
element、item、container。这些名称可能会与其他组件的part属性发生冲突。 - 提供文档： 在组件的文档中清晰地描述每个
part属性的作用和用法。
一个好的 part 属性命名示例：
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.header {
background-color: #eee;
padding: 10px;
}
.content {
padding: 20px;
}
.footer {
background-color: #eee;
padding: 10px;
text-align: center;
}
</style>
<div part="header" class="header">
<slot name="header"></slot>
</div>
<div part="content" class="content">
<slot></slot>
</div>
<div part="footer" class="footer">
<slot name="footer"></slot>
</div>
`;
}
}
customElements.define('my-component', MyComponent);
</script>在这个例子中，我们为组件的头部、内容和尾部分别添加了 part 属性，并使用了有意义的名称：header、content 和 footer。
4. ::part 的优先级和层叠规则
::part 伪元素的样式优先级高于 Shadow DOM 内部定义的样式，但低于外部文档中定义的普通 CSS 规则。
换句话说，样式优先级顺序如下：
- Shadow DOM 内部样式 (最低)
::part样式- 外部文档普通 CSS 样式 (最高)
这意味着，如果外部文档中定义了与 ::part 样式冲突的规则，外部文档的规则将覆盖 ::part 样式。
例如：
<my-button>Click me</my-button>
<style>
my-button::part(button) {
background-color: red; /* ::part 样式 */
}
my-button {
background-color: green; /* 外部文档普通 CSS 样式 */
}
</style>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
button {
background-color: blue; /* Shadow DOM 内部样式 */
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
<button part="button">
<slot></slot>
</button>
`;
}
}
customElements.define('my-button', MyButton);
</script>在这个例子中，最终按钮的背景颜色将是绿色，因为外部文档的 my-button 样式规则覆盖了 ::part(button) 样式规则和 Shadow DOM 内部样式。
重要提示：!important 的使用
如果在 ::part 样式中使用 !important 声明，它可以覆盖外部文档中定义的普通 CSS 规则。但是，强烈建议避免在 ::part 样式中使用 !important，因为它会降低组件的可定制性，并可能导致样式冲突。
5. 使用 ::part 和 CSS Variables 进行更灵活的定制
除了直接设置样式属性外，我们还可以结合 ::part 和 CSS Variables 来实现更灵活的定制。
CSS Variables (也称为自定义属性) 允许我们在 CSS 中定义变量，并在多个地方使用。我们可以使用 ::part 来设置 Shadow DOM 内部元素的 CSS Variables，然后在 Shadow DOM 内部使用这些变量来定义样式。
例如：
<my-button style="--button-background-color: purple; --button-text-color: white;">Click me</my-button>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
button {
background-color: var(--button-background-color, blue); /* 使用 CSS Variable */
color: var(--button-text-color, white); /* 使用 CSS Variable */
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
<button part="button">
<slot></slot>
</button>
`;
}
}
customElements.define('my-button', MyButton);
</script>在这个例子中，我们在 <my-button> 元素上定义了两个 CSS Variables：--button-background-color 和 --button-text-color。然后在 Shadow DOM 内部的 <button> 元素中使用了这两个变量来定义背景颜色和文字颜色。
这样，用户就可以通过修改 <my-button> 元素的 CSS Variables 来定制按钮的样式，而无需直接修改 ::part 样式。
6. ::part 与 ::theme 的区别
::theme 伪元素是另一个用于定制 Web Components 样式的特性，但它与 ::part 有着本质的区别。
::part： 用于选择 Shadow DOM 内部的特定元素，并为其应用样式。它允许用户控制组件内部的结构和布局。::theme： 用于应用预定义的“主题”或样式变体。它允许用户在不同的样式方案之间进行切换，而无需了解组件内部的细节。
简单来说，::part 提供了更细粒度的控制，而 ::theme 提供了更高级别的抽象。
7. ::part 的浏览器兼容性
::part 伪元素的浏览器兼容性良好，主流浏览器都支持它。但是，在一些旧版本的浏览器中可能需要使用 polyfill 来提供支持。
你可以使用 Can I Use 网站（https://caniuse.com/css-shadow-parts）来查看 ::part 的最新浏览器兼容性信息。
8. 总结：::part 的核心价值
| 特性 | 描述 |
|---|---|
| 样式定制 | 允许外部样式穿透 Shadow DOM，定制组件内部特定元素的样式。 |
| 组件封装 | 保持组件的封装性，同时提供样式定制的灵活性。 |
| CSS Variables | 结合 CSS Variables，实现更灵活、可配置的样式定制方案。 |
::part 伪元素是构建可定制、可复用的 Web Components 的关键工具。通过合理地使用 ::part，我们可以让用户轻松地定制组件的样式，而无需破坏组件的封装性。同时，结合 CSS Variables，我们可以实现更灵活、可配置的样式定制方案，从而创建出更加强大的 Web Components。
更多IT精英技术系列讲座，到智猿学院