当前位置：首页 > 文章列表 > 文章 > 前端 > 自定义元素与ShadowDOM详解教程

自定义元素与ShadowDOM详解教程

2025-11-20 17:54:36 0浏览收藏

**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 组件。

Web组件：Custom Elements与Shadow DOM

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

Custom Elements：定义自己的 HTML 标签

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

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

class MyCard extends HTMLElement {
　  constructor() {
　    super();
　    // 可在此设置默认内容或事件监听
　  }

　  connectedCallback() {
　    this.innerHTML = `

${this.getAttribute('title')}

`;
　 }
}

customElements.define('my-card', MyCard);

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

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

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

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

constructor() {
　  super();
　  const shadow = this.attachShadow({ mode: 'open' });
　  shadow.innerHTML = `
　
　

`;
}

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

组合使用的优势

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

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

比如添加属性监听：

static get observedAttributes() { return ['title']; }

attributeChangedCallback(name, oldValue, newValue) {
　  if (name === 'title') {
　    this.shadowRoot.querySelector('.card').textContent = newValue;
　  }
}

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

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