深入探讨 Web Components Shadow DOM 的 Style Scoping 机制，以及 ::part() 和 ::slotted() 伪元素如何实现组件样式隔离与外部样式的有限穿透。

各位观众老爷，晚上好！我是今天的主讲人，代号“代码搬运工”。今天咱们不搬砖，来聊点高大上的东西——Web Components 里的 Shadow DOM 和它的 Style Scoping 机制。别害怕，虽然名字听起来像科幻电影，但其实挺实在的，能帮你解决前端开发中一个大难题：样式冲突。

一、样式冲突：前端开发者的噩梦

在没有 Web Components 的世界里，CSS 样式就像一群熊孩子，到处乱跑，互相打架。你定义了一个 .button 样式，结果页面上所有按钮都跟着变了，可能包括你不希望改变的按钮。这是因为 CSS 的全局作用域特性，让所有样式都暴露在同一个“战场”上。

举个栗子：

<!DOCTYPE html>
<html>
<head>
  <title>样式冲突的惨案</title>
  <style>
    .button {
      background-color: red;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="button">全局按钮</button>
  <div class="container">
    <button class="button">容器里的按钮</button>
  </div>
  <button class="button">另一个全局按钮</button>
</body>
</html>

在这个例子里，所有 .button 类的按钮都变成了红色，即使你可能只想让某个特定区域内的按钮变红。这就是样式冲突带来的困扰。

二、Shadow DOM：给样式一个家

Web Components 的 Shadow DOM 就是来解决这个问题的。它可以创建一个独立的、封闭的 DOM 树，称为 Shadow Tree，与主文档的 DOM 树隔离。想象一下，Shadow DOM 就像给每个组件建了一个小房子，样式只能在自己的房子里生效，不会影响到外面的世界。

要使用 Shadow DOM，首先需要创建一个 Web Component：

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

    // 创建 Shadow DOM
    this.attachShadow({ mode: 'open' }); // or 'closed'

    // 在 Shadow DOM 中添加内容
    this.shadowRoot.innerHTML = `
      <style>
        .button {
          background-color: blue;
          color: white;
          padding: 10px 20px;
          border: none;
          cursor: pointer;
        }
      </style>
      <button class="button"><slot>默认文字</slot></button>
    `;
  }
}

// 注册组件
customElements.define('my-button', MyButton);

这段代码做了什么？

定义了一个名为 MyButton 的 Web Component。
在构造函数中，使用 this.attachShadow({ mode: 'open' }) 创建了一个 Shadow DOM。 mode: 'open' 表示可以通过 JavaScript 访问 Shadow DOM，mode: 'closed' 则不允许外部访问（更安全，但也更不灵活）。
在 Shadow DOM 中，我们定义了一个 .button 样式，并且添加了一个 <button> 元素，使用了 <slot> 元素来允许外部插入内容。

现在，在 HTML 中使用这个组件：

<!DOCTYPE html>
<html>
<head>
  <title>Shadow DOM 的威力</title>
  <style>
    .button {
      background-color: red;
      color: white;
      padding: 5px 10px; /* 故意设置和 Shadow DOM 不同的样式 */
      border: 1px solid black;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <my-button>我是插槽内容</my-button>
  <button class="button">全局按钮</button>
</body>
</html>

运行结果会发现：

MyButton 组件内的按钮是蓝色的，并且使用了 Shadow DOM 中定义的样式。
外部的 .button 样式对 MyButton 组件内的按钮没有影响。
全局按钮仍然是红色的，使用了全局样式。

Shadow DOM 成功地隔离了组件的样式，避免了样式冲突。组件内的样式不会影响到外部，外部的样式也不会影响到组件内部。就像给组件穿上了一件隐形衣，让它在样式世界里自由自在。

三、Style Scoping：Shadow DOM 的核心

Style Scoping 是 Shadow DOM 实现样式隔离的关键。它的工作原理很简单：

Shadow DOM 内部的样式只对 Shadow DOM 内部的元素生效。
Shadow DOM 外部的样式只对 Shadow DOM 外部的元素生效。
Shadow DOM 内部的样式优先级高于外部的样式，但外部样式可以通过 ::part 和 ::slotted 穿透。

这就像建立了一个单向的“防火墙”，外部的样式进不来，内部的样式出不去（默认情况下）。这种隔离机制保证了组件的独立性和可复用性。

四、::part()：有限的样式穿透

虽然 Shadow DOM 隔离了样式，但在某些情况下，我们可能希望允许外部样式修改组件内部的某些部分。这时，::part() 伪元素就派上用场了。

::part() 允许你选择 Shadow DOM 内部标记了 part 属性的元素，并应用外部样式。想象一下，part 属性就像给组件内部的某个部分开了一扇小窗，允许外部的样式“窥视”并修改它。

修改 MyButton 组件：

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 class="button" part="my-button">
        <slot>默认文字</slot>
      </button>
    `;
  }
}

customElements.define('my-button', MyButton);

我们在 <button> 元素上添加了 part="my-button" 属性。现在，可以在外部使用 ::part(my-button) 来修改按钮的样式：

<!DOCTYPE html>
<html>
<head>
  <title>::part() 的用法</title>
  <style>
    my-button::part(my-button) {
      background-color: green; /* 覆盖 Shadow DOM 内部的背景色 */
      border: 2px solid black; /* 添加边框 */
    }
  </style>
</head>
<body>
  <my-button>我是插槽内容</my-button>
</body>
</html>

运行结果会发现：

MyButton 组件的按钮背景色变成了绿色，并且添加了黑色边框。
::part(my-button) 成功地穿透了 Shadow DOM，修改了按钮的样式。

::part() 提供了一种有限的样式穿透机制，允许外部样式修改组件的某些部分，但仍然保持了组件的独立性。它就像一个可配置的“后门”，允许外部根据需要进行定制。

使用 ::part() 的注意事项：

只能选择标记了 part 属性的元素。
part 属性的值应该具有描述性，方便外部理解。
谨慎使用 ::part()，过度使用可能会破坏组件的封装性。

五、::slotted()：样式插槽内容

<slot> 元素允许外部内容插入到 Shadow DOM 中。但是，Shadow DOM 内部的样式默认不会影响到插槽中的内容。如果你想为插槽中的内容设置样式，可以使用 ::slotted() 伪元素。

::slotted() 允许你选择插入到 <slot> 元素中的元素，并应用 Shadow DOM 内部的样式。想象一下，::slotted() 就像一个“传送门”，允许 Shadow DOM 内部的样式“传送”到插槽中的内容。

修改 MyButton 组件：

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;
        }

        ::slotted(*) { /* 选择所有插槽内容 */
          font-weight: bold; /* 设置字体加粗 */
        }

        ::slotted(span) { /* 只选择插槽中的 <span> 元素 */
          color: red; /* 设置字体颜色为红色 */
        }
      </style>
      <button class="button" part="my-button">
        <slot></slot>
      </button>
    `;
  }
}

customElements.define('my-button', MyButton);

现在，在 HTML 中使用这个组件：

<!DOCTYPE html>
<html>
<head>
  <title>::slotted() 的用法</title>
</head>
<body>
  <my-button>
    <span>我是插槽中的 span 元素</span>
    我是普通的插槽内容
  </my-button>
</body>
</html>

运行结果会发现：

MyButton 组件的插槽内容字体加粗了。
插槽中的 <span> 元素字体颜色变成了红色。
::slotted(*) 选择器选择了所有插槽内容，并设置了字体加粗。
::slotted(span) 选择器只选择了插槽中的 <span> 元素，并设置了字体颜色为红色。

::slotted() 允许你为插槽中的内容设置样式，但只能在 Shadow DOM 内部进行。外部样式无法直接修改插槽内容。

使用 ::slotted() 的注意事项：

只能在 Shadow DOM 内部使用。
可以使用通配符 * 选择所有插槽内容。
可以使用标签名、类名、ID 等选择特定类型的插槽内容。
::slotted() 的优先级低于外部样式。如果外部样式与 ::slotted() 样式冲突，外部样式会覆盖 ::slotted() 样式。

六、::part() vs ::slotted()：区别与选择

::part() 和 ::slotted() 都是用于样式穿透的伪元素，但它们的应用场景不同：

特性	`::part()`	`::slotted()`
作用	允许外部样式修改组件内部标记了 `part` 属性的元素	允许 Shadow DOM 内部样式修改插槽中的内容
使用位置	外部样式表	Shadow DOM 内部样式表
选择器	`::part(part-name)`	`::slotted(*)`、`::slotted(element)`、`::slotted(.class)`
优先级	低于外部样式，高于 Shadow DOM 内部样式	低于外部样式
应用场景	允许外部定制组件的某些部分	为插槽中的内容设置样式

简单来说：

如果你想让外部能够修改组件内部的某些部分的样式，使用 ::part()。
如果你想为插槽中的内容设置样式，使用 ::slotted()。

七、总结：拥抱 Shadow DOM，告别样式冲突

Shadow DOM 是 Web Components 的核心特性之一，它通过 Style Scoping 机制实现了组件的样式隔离，避免了样式冲突。 ::part() 和 ::slotted() 伪元素则提供了有限的样式穿透能力，允许外部定制组件的某些部分，或者为插槽中的内容设置样式。

有了 Shadow DOM，你可以放心地编写组件，不用担心样式会影响到其他部分。就像拥有了一个独立的“王国”，在里面自由自在地构建你的前端世界。

希望今天的讲解对你有所帮助。记住，代码的世界是充满乐趣的，只要你愿意探索，就能发现更多奇妙的东西。

下次再见！

发表回复 取消回复

发表回复取消回复