自定义元素与ShadowDOM详解教程

**Web组件：自定义元素与Shadow DOM详解**。想要构建可复用、无框架依赖的UI组件？本文深入解析Web Components的核心技术：Custom Elements和Shadow DOM。Custom Elements允许你定义专属HTML标签，赋予其特定行为，而Shadow DOM则提供样式与结构的封装，实现组件内部与外部环境的隔离，避免全局污染。通过结合使用这两项技术，开发者可以创建高度封装的自定义组件，具备清晰的语义、隔离的样式以及响应属性变化的能力。本文将通过实例代码，详细讲解如何利用Custom Elements定义标签，使用Shadow DOM隔离样式，并实现内容分发与事件代理，助你掌握Web组件开发的精髓，为复杂应用提供干净的UI模块化方案。

Custom Elements 和 Shadow DOM 结合实现高度封装的自定义组件，通过定义标签、隔离样式、监听属性变化，支持内容分发与事件代理，可在任何现代浏览器中构建可复用、无框架依赖的 UI 组件。

Custom Elements 和 Shadow DOM 是 Web Components 的核心部分，它们让开发者可以创建可复用、封装良好的自定义 HTML 元素。这两项技术结合使用，能实现真正意义上的组件化开发，无需依赖框架也能构建结构清晰、样式隔离的 UI 组件。

Custom Elements：定义自己的 HTML 标签

Custom Elements 允许你创建新的 HTML 标签，并赋予其行为逻辑。通过 JavaScript 定义类并继承 HTMLElement，然后使用 customElements.define() 方法注册元素。

例如，你可以定义一个名为 的卡片组件：

之后就可以在页面中直接使用：。元素会在插入 DOM 时自动渲染内容。

Shadow DOM：实现样式与结构的封装

Shadow DOM 提供了一个独立的 DOM 子树，与主文档 DOM 隔离。这意味着组件内部的样式不会影响外部页面，外部样式也不会意外修改组件内部结构。

在 Custom Element 中启用 Shadow DOM 很简单，只需在构造函数中调用 this.attachShadow({ mode: 'open' })：

这里用了 来支持内容分发，使得外部传入的内容可以被正确渲染进组件内部。

组合使用的优势

将 Custom Elements 和 Shadow DOM 结合，能实现高度封装的组件：

• 自定义标签语义清晰，提升代码可读性
• 样式和结构完全隔离，避免全局污染
• 支持响应属性变化，可在 observedAttributes 中监听属性更新
• 无需框架即可在任何项目中使用，兼容现代浏览器

比如添加属性监听：

基本上就这些。掌握 Custom Elements 和 Shadow DOM 后，你可以写出真正独立、可移植的 Web 组件，为复杂应用提供干净的 UI 模块化方案。不复杂但容易忽略细节，比如正确使用 slot 和处理事件代理。

今天关于《自定义元素与ShadowDOM详解教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！