当前位置：首页 > 文章列表 > 文章 > 前端 > 自定义元素与阴影DOM详解

自定义元素与阴影DOM详解

2026-01-02 11:10:34 0浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《Web组件：自定义元素与阴影DOM解析》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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 和处理事件代理。

以上就是《自定义元素与阴影DOM详解》的详细内容，更多关于的资料请关注golang学习网公众号！