使用 Custom Elements 和 Shadow DOM 实现封装的 HTML 标记-JavaScript中文网-JavaScript教程资源分享门户

什么是 Custom Elements 和 Shadow DOM

Custom Elements 和 Shadow DOM 是 Web Components 的两个重要规范。Web Components 是一种用于开发可重用组件的技术，它可以让我们将 HTML、CSS 和 JavaScript 封装在一个自定义元素内，从而实现更好的组件化和模块化。

Custom Elements 是指自定义元素，我们可以使用它来创建一个全新的 HTML 元素，其行为和属性可以像普通 HTML 元素一样被操作和使用。Shadow DOM 是指影子 DOM，它可以将一个自定义元素的内部实现封装起来，使得外部无法直接访问和修改内部的 HTML 和 CSS，从而实现更好的封装性和隔离性。

如何使用 Custom Elements 和 Shadow DOM

创建 Custom Elements

创建 Custom Elements 需要使用 customElements.define 方法，该方法接受两个参数：自定义元素的名称和一个类，该类继承自 HTMLElement，并实现自定义元素的行为和属性。

// javascriptcn.com 代码示例
class MyButton extends HTMLElement {
  constructor() {
    super();
    // 初始化属性和事件
  }
  
  connectedCallback() {
    // 元素被插入到文档时调用
  }
  
  disconnectedCallback() {
    // 元素被移除出文档时调用
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    // 元素的属性被修改时调用
  }
}
customElements.define('my-button', MyButton);

在上面的代码中，我们定义了一个名为 MyButton 的自定义元素，并将其注册到了 my-button 标签名中。在类中，我们可以实现元素的行为和属性，并重写一些生命周期方法，以便在元素被插入到文档、移除出文档或者属性被修改时进行相应的处理。

创建 Shadow DOM

在自定义元素中，我们可以使用 attachShadow 方法创建 Shadow DOM，并将其附加到自定义元素上。Shadow DOM 中的 HTML 和 CSS 将被封装起来，只有自定义元素内部才能访问和修改。

// javascriptcn.com 代码示例
class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 创建和添加 Shadow DOM
    shadowRoot.innerHTML = `
      <style>
        /* Shadow DOM 中的样式 */
        :host {
          display: inline-block;
          padding: 8px 16px;
          color: #fff;
          background-color: #007bff;
          border-radius: 4px;
          cursor: pointer;
        }
      </style>
      <slot></slot>
    `;
    // 添加 Shadow DOM 中的 HTML 和 CSS
  }
}

在上面的代码中，我们使用 attachShadow 方法创建了一个新的 Shadow DOM，并将其附加到了自定义元素上。我们可以在 Shadow DOM 中添加 HTML 和 CSS，这些内容将被封装在自定义元素内部，只有自定义元素内部才能访问和修改。

使用 Custom Elements 和 Shadow DOM

使用 Custom Elements 和 Shadow DOM 创建的组件可以像普通 HTML 元素一样使用，只需要使用自定义元素的标签名即可。

<my-button>Click Me</my-button>

在上面的代码中，我们使用了名为 my-button 的自定义元素，并在其中添加了一些文本内容。这个自定义元素将会渲染出一个带有背景色和圆角的按钮，用户点击该按钮时可以触发相应的事件。

总结

在本文中，我们介绍了 Custom Elements 和 Shadow DOM 的基本概念和用法，并通过示例代码演示了如何使用这些技术实现封装的 HTML 标记。使用 Custom Elements 和 Shadow DOM 可以帮助我们更好地组织和管理前端代码，实现更好的组件化和模块化，提高代码的可维护性和可复用性。

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