当前位置：首页 > 文章列表 > 文章 > 前端 > WebComponents入门：自定义元素与影子DOM解析

WebComponents入门：自定义元素与影子DOM解析

2026-02-26 21:37:05 0浏览收藏

Web Components 通过原生支持的自定义元素和影子 DOM 技术，让开发者能像搭乐高一样轻松创建语义化、可复用、真正封装的 HTML 组件——前者让你定义专属标签并响应生命周期，后者则为组件筑起一道样式与脚本的隔离墙，彻底避免全局污染与冲突；它不依赖框架、符合标准、兼容主流浏览器，是构建轻量、健壮、跨技术栈 UI 库的现代基石。

什么是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 的自定义元素。当你把放到 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);

现在，你可以通过来显示 "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!"。即使你的主文档中有其他的 h1 样式，也不会影响到影子 DOM 内部的 h1。

影子 DOM 的模式有什么区别？

attachShadow 方法接受一个配置对象，其中 mode 属性可以设置为 open 或 closed。