Web Components 基础：Shadow DOM 和 Custom Elements-JavaScript中文网-JavaScript教程资源分享门户

Web Components 是一项用于构建可重用、可组合的 Web 应用程序的技术，它由三个主要的技术组成：Shadow DOM、Custom Elements 和 HTML Templates。

本文主要介绍其中两个基础技术：Shadow DOM 和 Custom Elements。

Shadow DOM

Shadow DOM 是 Web Components 技术的核心之一，它可以使我们创建自己的 DOM 子树，并将其与主 DOM 树分离开来，从而实现一些有趣的特性，例如封装性、作用域和样式隔离等。

封装性

使用 Shadow DOM 可以将 Web 组件的内部实现细节封装起来，只暴露出需要对外使用的接口，从而避免了组件的内部实现被外部直接访问和修改的风险。

作用域

Shadow DOM 中的元素具有独立的作用域，从而避免了全局 CSS 样式和 JavaScript 变量的冲突，使得组件的样式和行为更加可预测和可控。

样式隔离

Shadow DOM 中的样式不会影响到主 DOM 树中的其他元素，同时也不会被主 DOM 树中的样式所影响，从而实现了样式的隔离。

下面是一个使用 Shadow DOM 的示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Shadow DOM Demo</title>
</head>
<body>
  <h1>Shadow DOM Demo</h1>
  <div id="container"></div>
  <script>
    const container = document.getElementById('container');
    const shadowRoot = container.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        p {
          font-size: 24px;
          color: red;
        }
      </style>
      <p>Hello, Shadow DOM!</p>
    `;
  </script>
</body>
</html>

在上面的代码中，我们创建了一个 Shadow DOM，然后在其中添加了一个红色的 <p> 元素，最后将这个 Shadow DOM 添加到了页面中的一个 <div> 元素中。

Custom Elements

Custom Elements 是 Web Components 技术的另一个核心，它可以让我们创建自定义的 HTML 元素，并在其中添加自己的行为和属性。

创建自定义元素

要创建一个自定义元素，我们需要使用 customElements.define() 方法来注册这个元素，然后在其中定义这个元素的行为和属性。

下面是一个创建自定义元素的示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Custom Elements Demo</title>
</head>
<body>
  <h1>Custom Elements Demo</h1>
  <my-element></my-element>
  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <p>Hello, Custom Elements!</p>
        `;
      }
    }
    customElements.define('my-element', MyElement);
  </script>
</body>
</html>

在上面的代码中，我们定义了一个名为 MyElement 的自定义元素，并在其中创建了一个 Shadow DOM，然后在其中添加了一个 <p> 元素，最后将这个自定义元素注册到了 customElements 中。

添加自定义属性

要添加自定义属性，我们只需要在自定义元素的构造函数中使用 this.setAttribute() 方法来添加属性，然后在其中添加对应的 getter 和 setter 方法即可。

下面是一个添加自定义属性的示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Custom Elements Demo</title>
</head>
<body>
  <h1>Custom Elements Demo</h1>
  <my-element message="Hello, Custom Elements!"></my-element>
  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <p>${this.message}</p>
        `;
      }
      static get observedAttributes() {
        return ['message'];
      }
      attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'message') {
          this.message = newValue;
        }
      }
      get message() {
        return this.getAttribute('message');
      }
      set message(value) {
        this.setAttribute('message', value);
      }
    }
    customElements.define('my-element', MyElement);
  </script>
</body>
</html>

在上面的代码中，我们添加了一个名为 message 的自定义属性，并在其中使用了 getter 和 setter 方法来实现属性的访问和修改，同时也实现了属性的响应式更新。

总结

本文介绍了 Web Components 技术中的两个基础技术：Shadow DOM 和 Custom Elements，其中 Shadow DOM 可以实现组件的封装性、作用域和样式隔离，而 Custom Elements 可以让我们创建自定义的 HTML 元素，并在其中添加自己的行为和属性。

通过学习这些基础技术，我们可以更加轻松地构建可重用、可组合的 Web 应用程序，并提高应用程序的可维护性和可扩展性。

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