Custom Elements 与 Shadow DOM 是 Web 组件核心技术，前者用于定义自定义标签并控制行为，后者实现样式和结构隔离。1. Custom Elements 通过继承 HTMLElement 并调用 customElements.define() 注册，标签名需含短横线以避免冲突；2. Shadow DOM 通过 attachShadow() 挂载，提供独立 DOM 子树，防止样式互相影响，mode 可设为 open 或 closed 以控制访问权限；3. 结合使用时应采用语义化命名、利用 slot 内容分发、监听属性变化更新 UI，并将样式置于 Shadow DOM 内部以确保封装性，适用于现代浏览器，可构建不依赖框架的高复用性组件。
在现代前端开发中，Web组件提供了一种构建可复用、封装性强且无需依赖框架的UI组件的方式。其中，Custom Elements 和 Shadow DOM 是 Web 组件的两大核心技术。它们让开发者可以创建自定义 HTML 标签，并为其添加独立的样式和行为，实现真正的组件化开发。
Custom Elements：定义自定义标签
Custom Elements 允许开发者定义自己的 HTML 元素，并通过 JavaScript 控制其行为。浏览器原生支持这类元素，无需引入额外库。
要创建一个 Custom Element，需继承 HTMLElement 并使用 customElements.define() 方法注册。
class MyButton extends HTMLElement {
constructor() {
super();
// 初始化内容或属性
this.textContent = this.getAttribute('label') || '默认按钮';
}
// 可监听属性变化
static get observedAttributes() {
return ['label'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'label') {
this.textContent = newValue;
}
}
}
customElements.define('my-button', MyButton);
使用方式：
注意命名规则必须包含短横线（-），如 my-button，这是为了避免与标准 HTML 标签冲突。
Shadow DOM：实现样式与结构的隔离
Shadow DOM 提供了一个独立的 DOM 子树，与主文档 DOM 隔离。这意味着组件内部的样式不会影响外部页面，外部样式也不会污染组件内部。
在 Custom Element 构造函数中，可通过 attachShadow() 方法挂载 Shadow DOM。
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML =
zuojiankuohaophpcnstyleyoujiankuohaophpcn
.card {
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
background: #f9f9f9;
}
zuojiankuohaophpcn/styleyoujiankuohaophpcn
zuojiankuohaophpcndiv class="card"youjiankuohaophpcn
zuojiankuohaophpcnslotyoujiankuohaophpcnzuojiankuohaophpcn/slotyoujiankuohaophpcn zuojiankuohaophpcn!-- 插槽，允许传入内容 --youjiankuohaophpcn
zuojiankuohaophpcn/divyoujiankuohaophpcn
}
}
customElements.define('my-card', MyCard);
使用方式：
这是一段卡片内容。
Shadow DOM 的 mode 可设为 open 或 closed。设为 open 时，JavaScript 可通过 element.shadowRoot 访问内部结构；closed 则不可访问，增强封装性。
结合使用建议与最佳实践
将 Custom Elements 与 Shadow DOM 结合，是构建高内聚、低耦合组件的标准方式。以下是一些实用建议：
- 始终使用语义化的自定义标签名，例如 user-avatar、data-table
- 利用
实现内容分发，提升组件灵活性 - 避免在构造函数中执行耗时操作，DOM 渲染可能受影响
- 合理使用 observedAttributes 监听属性变化，更新 UI
- 样式写在 Shadow DOM 内部，防止全局污染
- 考虑兼容性：现代主流浏览器均支持，但旧版 IE 不行
基本上就这些。掌握 Custom Elements 与 Shadow DOM，能让你写出真正解耦、可复用的原生 Web 组件，不依赖 React 或 Vue 也能实现组件化开发。不复杂但容易忽略的是细节，比如标签命名和 Shadow DOM 模式选择。
