什么是Web Components的自定义元素和影子DOM，以及它们如何实现组件的封装和复用？-js教程-PHP中文网

什么是Web Components的自定义元素和影子DOM，以及它们如何实现组件的封装和复用？

夜晨

发布： 2025-09-17 23:11:01

原创

792人浏览过

自定义元素和影子DOM是Web Components核心，前者通过类继承HTMLElement创建新标签，后者用attachShadow隔离内部结构，实现封装复用。

什么是web components的自定义元素和影子dom，以及它们如何实现组件的封装和复用？

Web Components 的自定义元素和影子 DOM 就像乐高积木，让你创造自己的 HTML 标签，并把它们的内部结构藏起来，方便复用，避免样式冲突。

自定义元素和影子 DOM 是 Web Components 这套技术的核心组成部分，它们共同作用，实现了组件的封装和复用。

自定义元素：创造你的 HTML 标签

如何定义一个自定义元素？

首先，你需要用 JavaScript 定义一个类，这个类继承自

HTMLElement

登录后复制

。在这个类里，你可以定义组件的行为和属性。

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // 组件初始化
  }

  connectedCallback() {
    // 组件添加到 DOM 时触发
    this.innerHTML = `<h1>Hello, World!</h1>`;
  }
}

customElements.define('my-custom-element', MyCustomElement);

登录后复制

这段代码定义了一个名为

my-custom-element

登录后复制

的自定义元素。当你把

<my-custom-element>

登录后复制

放到 HTML 中时，它就会显示 "Hello, World!"。

如何使用自定义元素的属性？

你可以使用

attributeChangedCallback

登录后复制

方法来监听属性的变化，并在组件内部做出相应的更新。

class MyCustomElement extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.render();
  }

  render() {
    this.innerHTML = `<h1>Hello, ${this.getAttribute('name') || 'World'}!</h1>`;
  }
}

customElements.define('my-custom-element', MyCustomElement);

登录后复制

现在，你可以通过

<my-custom-element name="Alice"></my-custom-element>

登录后复制

来显示 "Hello, Alice!"。

影子 DOM：保护组件的内部世界

影子 DOM 是什么？

影子 DOM 就像一个独立的 DOM 树，它与主文档的 DOM 树隔离。这意味着影子 DOM 内部的样式和脚本不会影响到外部，反之亦然。

如何创建一个影子 DOM？

你可以使用

attachShadow

登录后复制

方法来创建一个影子 DOM。

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // 创建一个开放模式的影子 DOM
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        h1 { color: blue; }
      </style>
      <h1>Hello, World!</h1>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);

登录后复制

这段代码创建了一个影子 DOM，并在其中添加了一个带有蓝色标题的 "Hello, World!"。即使你的主文档中有其他的