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

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

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

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

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

首先，你需要用 JavaScript 定义一个类，这个类继承自 HTMLElement。在这个类里，你可以定义组件的行为和属性。

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

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

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 = `
Hello, ${this.getAttribute('name') || 'World'}!
`;
  }
}

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 = `
      
      
Hello, World!
    `;
  }
}

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

这段代码创建了一个影子 DOM，并在其中添加了一个带有蓝色标题的 "Hello, World!"。即使你的主文档中有其他的 h1 样式，也不会影响到影子 DOM 内部的 h1。

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

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

• open 模式：你可以通过 element.shadowRoot 访问到影子 DOM。
• closed 模式：你无法从外部访问到影子 DOM。

通常情况下，open 模式更常用，因为它允许你进行调试和测试。

自定义元素和影子 DOM 如何协同工作？

自定义元素定义了组件的行为，而影子 DOM 保护了组件的内部结构。它们一起工作，实现了组件的封装和复用。你可以把自定义元素看作是组件的接口，而影子 DOM 是组件的实现。

Web Components 的优势是什么？

• 可复用性： 你可以在任何支持 Web Components 的浏览器中使用你的组件。
• 封装性： 影子 DOM 保护了组件的内部结构，避免了样式冲突。
• 互操作性： Web Components 可以与任何 JavaScript 框架一起使用。
• 标准化： Web Components 是一套 W3C 标准，得到了广泛的支持。

Web Components 的兼容性如何？

Web Components 得到了现代浏览器的广泛支持。对于不支持 Web Components 的浏览器，你可以使用 polyfill 来提供支持。

Web Components 的性能如何？

Web Components 的性能通常很好，但需要注意避免过度使用影子 DOM，因为它可能会增加 DOM 的复杂性。

Web Components 的最佳实践是什么？

• 使用语义化的 HTML 标签。
• 避免过度使用影子 DOM。
• 使用 CSS 自定义属性来提供样式定制。
• 编写清晰的文档和示例。
• 进行充分的测试。

如何使用 Web Components 构建一个简单的 UI 组件库？

1. 定义你的组件接口：确定组件的属性和事件。
2. 实现你的组件：使用自定义元素和影子 DOM 来实现组件的行为和样式。
3. 编写文档和示例：提供清晰的文档和示例，方便其他开发者使用你的组件。
4. 发布你的组件：你可以将你的组件发布到 npm 或其他包管理器上。

Web Components 的未来发展趋势是什么？

Web Components 正在变得越来越流行，越来越多的开发者开始使用它来构建可复用的 UI 组件。未来，我们可以期待 Web Components 得到更广泛的支持，并出现更多的工具和框架来简化 Web Components 的开发。

文中关于自定义元素的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《WebComponents入门：自定义元素与影子DOM解析》文章吧，也可关注golang学习网公众号了解相关技术文章。