Web Components 由自定义元素、影子 DOM 和 HTML 模板构成，支持创建可复用、隔离性强的独立组件，通过生命周期回调和属性监听实现响应式行为，适用于跨框架的高解耦前端开发。
Web Components 是一套允许开发者创建可重用、独立封装的自定义 HTML 元素的技术，它不依赖任何框架，原生支持现代浏览器。在 JavaScript 中使用 Web Components，能帮助你构建高度解耦、可维护性强的前端组件体系。核心由三项技术构成：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（HTML Templates）。
自定义元素（Custom Elements）
自定义元素让你可以定义新的 HTML 标签，并赋予其行为。通过 customElements.define() 方法注册一个类继承自 HTMLElement 的构造函数。
例如，创建一个名为
之后就可以在 HTML 中直接使用：
立即学习“Java免费学习笔记（深入）”；
支持两种类型：
- 自治自定义元素：完全新标签，继承自 HTMLElement，如上例。
-
内置自定义元素：扩展已有 HTML 元素，需设置第三个参数
{extends: 'button'}，然后在 HTML 中通过is属性使用。
影子 DOM（Shadow DOM）
影子 DOM 提供了真正的样式和结构封装，避免全局污染。每个组件可以挂载一个独立的 DOM 子树，与主文档隔离。
在组件构造函数中调用 this.attachShadow({mode: 'open'}) 创建影子根：
class MyCard extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = `使用方式：
注意：影子 DOM 内的样式不会影响外部，外部样式也不会轻易穿透进来，实现真正隔离。
HTML 模板（ 和 ）
标签用于声明不可见的 DOM 模板，直到被 JavaScript 实例化。结合
示例模板：
在自定义元素中克隆模板并插入影子 DOM：
const template = document.getElementById('my-modal-template'); const clone = template.content.cloneNode(true); this.shadowRoot.appendChild(clone);多插槽机制让使用者能按名称传入不同区域的内容，提高组件复用性。
生命周期回调与响应属性变化
自定义元素提供多个生命周期钩子，便于控制组件行为：
- connectedCallback：元素插入 DOM 时触发，适合绑定事件或渲染 UI。
- disconnectedCallback：元素从 DOM 移除时调用，可用于清理资源。
- attributeChangedCallback：监控属性变化，需配合 observedAttributes 静态属性使用。
例如监听属性更新：
static get observedAttributes() { return ['theme']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'theme') { this.shadowRoot.querySelector('.card').className = `card ${newValue}`; } }这样当外部修改
基本上就这些。Web Components 虽不如 React 或 Vue 那样有丰富生态，但它轻量、标准、跨框架兼容，适合构建设计系统、嵌入式小工具或需要长期维护的基础组件库。掌握它，能让 JavaScript 的组件化能力更进一步。
