初识 Custom Elements 和 Shadow DOM-JavaScript中文网-JavaScript教程资源分享门户

初识 Custom Elements 和 Shadow DOM

在 Web 开发中，我们经常需要自定义一些标签来实现特定的功能，比如自定义一个视频播放器，一个图片轮播组件等等。在过去，我们实现这些功能的方式是通过 JavaScript 操作 DOM 元素，然后在元素上添加事件处理函数等等。这种方式虽然可行，但是代码耦合度高，可维护性和可扩展性都很差。

为了解决这个问题，W3C 推出了 Custom Elements 和 Shadow DOM 这两项新的 Web 标准，它们可以让我们更方便地自定义标签，实现更高效、更可维护的代码。

Custom Elements

Custom Elements 允许开发者定义自己的 HTML 元素，可以用自定义标签名来代替 HTML 标签名。比如，我们可以定义一个名为 my-video 的自定义标签来代替 <video> 标签。

<my-video src="my-video.mp4"></my-video>

如何定义一个 Custom Element 呢？我们可以使用 window.customElements.define 方法来注册一个自定义元素。下面是一个简单的示例：

// javascriptcn.com 代码示例
class MyVideo extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });

    const video = document.createElement('video');
    video.src = this.getAttribute('src');

    shadow.appendChild(video);
  }
}

window.customElements.define('my-video', MyVideo);

上面的代码定义了一个 MyVideo 类，继承自 HTMLElement。在构造函数中，我们使用了 attachShadow 方法创建了一个 Shadow DOM，然后在 Shadow DOM 中创建了一个 <video> 标签，并将其添加到 Shadow DOM 中。最后，我们使用 window.customElements.define 方法将 MyVideo 类注册为 my-video 自定义标签。

Shadow DOM

Shadow DOM 允许开发者创建一个独立的 DOM 树，与主文档的 DOM 树完全隔离。这意味着我们可以在 Shadow DOM 内部使用任意的 HTML、CSS 和 JavaScript，而不用担心它们会影响到主文档。

Shadow DOM 由 Shadow Host（宿主元素）、Shadow Tree（Shadow DOM 树）和 Shadow Boundary（Shadow DOM 边界）三部分组成。在 Custom Elements 中，我们可以使用 attachShadow 方法来创建一个 Shadow DOM。

const shadow = this.attachShadow({ mode: 'open' });

attachShadow 方法接受一个配置对象参数，其中 mode 属性可以是 open 或 closed。open 表示 Shadow DOM 是公开的，可以通过 JavaScript 访问到 Shadow DOM 中的元素，而 closed 表示 Shadow DOM 是私有的，无法通过 JavaScript 访问。

在 Shadow DOM 中，我们可以使用 slot 元素来定义一个插槽，让开发者可以在 Custom Element 中插入自己的内容。

<my-video>
  <div class="controller">
    <button>Play</button>
    <button>Pause</button>
  </div>
</my-video>

// javascriptcn.com 代码示例
class MyVideo extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });

    const video = document.createElement('video');
    video.src = this.getAttribute('src');

    const slot = document.createElement('slot');
    const controller = document.createElement('div');
    controller.className = 'controller';

    slot.setAttribute('name', 'controller');
    controller.appendChild(slot);

    shadow.appendChild(video);
    shadow.appendChild(controller);
  }
}

window.customElements.define('my-video', MyVideo);

上面的代码定义了一个插槽，使用 slot 元素来定义，将其命名为 controller。然后在 Custom Element 的构造函数中，我们创建了一个 <div> 元素作为控制器，将插槽添加到其中，并将该元素添加到 Shadow DOM 中。

总结

Custom Elements 和 Shadow DOM 是 Web 开发中的两个重要概念，它们可以帮助我们更方便地自定义标签，实现更高效、更可维护的代码。在实际开发中，我们可以结合使用 Custom Elements 和 Shadow DOM，创建自定义标签并在其中使用插槽，以实现更灵活的组件化开发。

参考代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Elements and Shadow DOM</title>
</head>
<body>
  <my-video src="my-video.mp4">
    <div slot="controller">
      <button>Play</button>
      <button>Pause</button>
    </div>
  </my-video>
  
  <script>
    class MyVideo extends HTMLElement {
      constructor() {
        super();

        const shadow = this.attachShadow({ mode: 'open' });

        const video = document.createElement('video');
        video.src = this.getAttribute('src');

        const slot = document.createElement('slot');
        const controller = document.createElement('div');
        controller.className = 'controller';

        slot.setAttribute('name', 'controller');
        controller.appendChild(slot);

        shadow.appendChild(video);
        shadow.appendChild(controller);
      }
    }

    window.customElements.define('my-video', MyVideo);
  </script>
</body>
</html>

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65703bacd2f5e1655d8f4227