JavaScript中的Web Components技术如何用于构建可复用组件？

Web Components 技术通过自定义元素、影子 DOM 和 HTML 模板三大核心功能，结合属性监听机制，可构建高内聚、低耦合的可复用组件。 具体实现方式如下：

• 定义组件标签：通过继承 HTMLElement 类并使用 customElements.define() 方法注册自定义标签，使组件像原生 HTML 元素一样使用。
• 示例：class MyButton extends HTMLElement { constructor() { super(); this.textContent = this.getAttribute('label') || '点击我'; this.addEventListener('click', () => alert('按钮被点击！')); }}customElements.define('my-button', MyButton);
• 使用：在 HTML 中直接调用 <my-button label="提交"></my-button>。

• 隔离样式与结构：通过 attachShadow({ mode: 'open' }) 创建影子根，将组件内部样式和结构与外部隔离，避免样式污染和选择器冲突。
• 示例：constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` <style> button { padding: 10px 20px; background-color: #007bff; } </style> <button><slot></slot></button> `;}
• 效果：组件内部样式仅作用于自身，外部样式无法穿透影子 DOM。

• 预定义复杂结构：通过 <template> 标签定义静态结构，运行时通过 cloneNode(true) 克隆内容，提升性能和可维护性。
• 示例：<template id="my-card-template"> <style> .card { border: 1px solid #ddd; } </style> <div class="card"> <h3><slot name="title"></slot></h3> <p><slot></slot></p> </div></template>connectedCallback() { const template = document.getElementById('my-card-template'); const content = template.content.cloneNode(true); this.attachShadow({ mode: 'open' }).appendChild(content);}

• 监听属性变化：通过静态 observedAttributes getter 声明需监听的属性，配合 attributeChangedCallback 实现响应式更新。
• 示例：static get observedAttributes() { return ['label', 'disabled']; }attributeChangedCallback(name, oldValue, newValue) { if (name === 'disabled') { this.shadowRoot.querySelector('button').disabled = newValue !== null; }}
• 效果：当外部修改 disabled 属性时，组件自动更新按钮状态。

• 跨框架使用：Web Components 是浏览器原生技术，不依赖任何框架，可在 React、Vue、Angular 等项目中直接使用。
• 设计系统应用：适合构建按钮、弹窗、输入框等通用组件库，通过插槽（<slot>）实现内容自定义。
• 工具优化：原生写法虽繁琐，但可通过 Stencil、Lit 等工具简化开发流程。

Web Components 通过以下机制实现可复用组件：

• 自定义元素：定义组件标签，提供标准化接口。
• 影子 DOM：隔离样式与结构，确保组件独立性。
• HTML 模板：预定义结构，提升性能。
• 属性监听：实现响应式更新，增强交互能力。

优势：无框架依赖、高内聚、低耦合，适合跨项目通用组件开发。局限：原生 API 需手动处理生命周期和状态管理，但可通过工具链弥补。