深入JavaScript_Web Components

Web Components 由自定义元素、影子 DOM 和 HTML 模板构成，支持创建可复用、隔离性强的独立组件，通过生命周期回调和属性监听实现响应式行为，适用于跨框架的高解耦前端开发。

Web Components 是一套允许开发者创建可重用、独立封装的自定义 HTML 元素的技术，它不依赖任何框架，原生支持现代浏览器。在 JavaScript 中使用 Web Components，能帮助你构建高度解耦、可维护性强的前端组件体系。核心由三项技术构成：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（HTML Templates）。

自定义元素（Custom Elements）

自定义元素让你可以定义新的 HTML 标签，并赋予其行为。通过 customElements.define() 方法注册一个类继承自 HTMLElement 的构造函数。

例如，创建一个名为 的按钮组件：

class MyButton extends HTMLElement { connectedCallback() { this.textContent = this.getAttribute('label') || '点击我'; this.style.padding = '10px 20px'; this.style.backgroundColor = '#007bff'; this.style.color = 'white'; this.style.borderRadius = '4px'; this.style.display = 'inline-block'; this.style.cursor = 'pointer'; } } customElements.define('my-button', MyButton);

之后就可以在 HTML 中直接使用：

支持两种类型：

• 自治自定义元素：完全新标签，继承自 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 = ` `; } } customElements.define('my-card', MyCard);

使用方式：

这是一段插槽内容

注意：影子 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 的组件化能力更进一步。