Web Components 如何使用 ShadowDOM 实现组件内部样式？-JavaScript中文网-JavaScript教程资源分享门户

Web Components 是一种用于构建可重用组件的技术，可以让开发者使用自定义标签、样式和行为来创建自己的组件。其中，ShadowDOM 是 Web Components 最为核心的一部分，是实现组件化和封装性的重要手段。

在本文中，我们将详细介绍 ShadowDOM 的概念、用法和实现方式，以及如何在 Web Components 中使用 ShadowDOM 实现组件内部样式。

ShadowDOM 是什么？

ShadowDOM 是一种用于创建封装和控制 DOM 的机制。它允许开发者在组件内部使用私有的、隔离的 DOM 和样式，以防止外部样式和结构污染组件。

ShadowDOM 具有以下特点：

封装性：ShadowDOM 可以将组件内部的 DOM 树、样式和行为封装起来，从而实现组件的封装、隔离和保护。
隔离性：ShadowDOM 中的 DOM 和样式与外部 DOM 和样式相互隔离，可以避免 CSS 级联和选择器冲突等问题。
继承性：ShadowDOM 中的 DOM 和样式可以继承父组件的样式和行为，从而实现样式和行为的复用。
插槽机制：ShadowDOM 中的插槽机制可以让子组件通过父组件传递内容和样式，实现灵活的组件组合和复用。

ShadowDOM 的用法

下面让我们来看一下 ShadowDOM 是如何使用的。

创建 ShadowDOM

在 Web Components 中，可以使用 attachShadow() 方法来创建 ShadowDOM。例如：

// www.javascriptcn.com code example
<!-- 创建名为 my-component 的组件，并创建 ShadowDOM -->
<my-component>
  #shadow-root
  <h1>Hello World</h1>
</my-component>

<script>
  const MyComponent = customElements.define('my-component', class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'}); // 创建 ShadowDOM
      shadowRoot.innerHTML = `<h1>Hello World</h1>`; // 在 ShadowDOM 中添加节点和样式
    }
  });
</script>

上面的代码中，我们先在 HTML 中定义了一个名为 my-component 的自定义标签，并在其中添加了一个空的 ShadowDOM 根节点 #shadow-root。然后在 JS 代码中，我们使用 customElements.define() 方法定义了一个名为 MyComponent 的类，它继承了基类 HTMLElement，并在构造函数中使用 attachShadow() 方法创建了一个开放式的 ShadowDOM，并在其中添加了一个 <h1> 节点。

注意，attachShadow() 方法的 mode 参数可以是 open 或 closed，表示 ShadowDOM 是开放的还是关闭的。开放式 ShadowDOM 可以从外部访问，并允许样式和属性穿透到 ShadowDOM 内部。关闭式 ShadowDOM 则与外部完全隔离，不会与外部 DOM 发生交互。

使用 ShadowDOM

在创建了 ShadowDOM 之后，我们就可以在其中添加节点和样式了。为了实现样式隔离，我们需要将样式添加到 ShadowDOM 中，而不是添加到外部 DOM 中。

例如，我们可以在 ShadowDOM 中添加以下样式：

// www.javascriptcn.com code example
<my-component>
  #shadow-root
  <style>
    h1 {
      color: red;
    }
  </style>
  <h1>Hello World</h1>
</my-component>

上面的样式会应用到 ShadowDOM 内部，并与外部 DOM 和样式相互隔离。

ShadowDOM 插槽机制

ShadowDOM 插槽机制可以让子组件通过父组件传递内容和样式，实现灵活的组件组合和复用。

例如，我们可以在父组件中定义一个 <slot> 元素来代表子组件中的可插入节点，如下所示：

// www.javascriptcn.com code example
<!-- 父组件 -->
<my-parent>
  <div>Parent content</div>
  <my-child>
    <h2 slot="title">Child title</h2>
    <p slot="content">Child content</p>
  </my-child>
</my-parent>

<!-- 子组件 -->
<my-child>
  #shadow-root
  <div id="title"><slot name="title"></slot></div>
  <div id="content"><slot name="content"></slot></div>
</my-child>

在上面的代码中，父组件中包含了一个 <my-child> 子组件，并在其中传递了一些内容和样式，包括一个 slot="title" 和一个 slot="content"。

而在子组件 <my-child> 的 ShadowDOM 中，则包含了两个 <slot> 元素，分别对应传递进来的 slot="title" 和 slot="content"，并在其中插入了传递进来的节点。

这样一来，父组件就可以通过插槽机制向子组件传递内容和样式，而子组件则可以根据插槽的名称和节点类型来决定如何插入节点和样式，实现灵活的组件组合和复用。

使用 ShadowDOM 实现组件内部样式

在 Web Components 中，使用 ShadowDOM 可以有效地实现组件内部的样式封装和隔离，使组件更为独立和可复用。

下面是一个使用 ShadowDOM 实现组件内部样式的示例代码：

// www.javascriptcn.com code example
<my-button>
  #shadow-root
  <style>
    button {
      color: white;
      background-color: blue;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
  <button><slot></slot></button>
</my-button>

在上面的代码中，我们定义了一个名为 my-button 的按钮组件，并在其中使用 ShadowDOM 来实现样式的封装和隔离。在 ShadowDOM 中，我们定义了一个样式规则，将按钮的样式应用到 <button> 元素上，并使用 <slot> 元素来代表按钮的内容。这样，父组件在使用 <my-button> 组件时，就可以在其中插入任意内容，而不会影响到按钮的样式和行为。

以上是使用 ShadowDOM 实现组件内部样式的基本步骤和示例代码，如果您想了解更多关于 Web Components 和 ShadowDOM 的知识和实践，可以进一步参考相关资料和教程，深入学习和掌握更为高级和实用的技巧和方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfeb02e46428fe9ec3914a

Web Components 如何使用 ShadowDOM 实现组件内部样式？