Web Components 提供浏览器原生组件化方案，由自定义元素、影子 DOM 和 HTML 模板组成，支持跨框架复用。通过 customElements.define() 创建自定义标签，利用影子 DOM 实现样式隔离，结合 observedAttributes 与 attributeChangedCallback 响应属性变化，并通过 CustomEvent 通信。在 React 中需手动处理非标准属性，Vue 直接支持，Angular 需配置 CUSTOM_ELEMENTS_SCHEMA。建议延迟渲染至 connectedCallback，使用 Lit 等库提升开发效率，兼顾性能与兼容性。
Web Components 提供了一套浏览器原生的组件化方案，让开发者可以创建可复用、封装良好且不依赖特定框架的 UI 组件。这意味着你写的组件可以在 React、Vue、Angular 甚至纯 HTML 项目中直接使用。核心在于它不依赖任何框架的运行时，而是基于标准 Web API。
使用原生技术构建独立组件
Web Components 由三项技术组成：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（template）。结合这些技术，你可以创建完全隔离样式的组件。
- 自定义元素：通过 customElements.define() 注册一个新标签名，比如 <my-button>。
- 影子 DOM：在组件内部创建一个隔离的 DOM 树，避免样式和结构冲突。
- HTML 模板：使用 <template> 预定义组件结构，在实例化时克隆使用。
示例代码：
class MyButton extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` `; } } customElements.define('my-button', MyButton);这样定义的 <my-button> 可以在任意页面或框架中使用。
支持属性与事件通信
为了让组件更灵活，需要响应属性变化并对外抛出事件。
- 通过 static get observedAttributes() 定义需监听的属性。
- 实现 attributeChangedCallback 在属性变更时更新 UI。
- 使用 this.dispatchEvent(new CustomEvent(...)) 触发自定义事件。
例如添加 disabled 属性：
static get observedAttributes() { return ['disabled']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'disabled') { const button = this.shadowRoot.querySelector('button'); button.disabled = newValue !== null; } }在 Vue 或 React 中可通过 disabled 属性控制状态，点击事件也能正常监听。
在主流框架中集成
由于 Web Components 是原生 HTML 标签，大多数现代框架都能直接渲染，但需注意一些细节。
- React：不自动传递非标准属性和事件，建议用 ref 手动绑定或使用第三方库如 react-with-native-web-components。
- Vue：支持良好，在模板中直接使用自定义标签，v-model 可用于支持 value 和 input 事件的组件。
- Angular：需在 NgModule 中配置 schemas: [CUSTOM_ELEMENTS_SCHEMA]，允许未知标签。
确保组件暴露清晰的属性、事件和方法文档，便于其他开发者使用。
优化与维护策略
虽然 Web Components 跨框架，但仍需考虑性能和兼容性。
- 避免在构造函数中做复杂操作，延迟渲染到 connectedCallback。
- 合理使用影子 DOM 的样式封装，减少全局污染。
- 为旧版浏览器提供 polyfill（如 @webcomponents/webcomponentsjs）。
- 结合工具如 Lit 简化开发，Lit 提供了响应式属性和声明式模板。
Lit 示例：
import { LitElement, html, css } from 'lit'; class MyCard extends LitElement { static properties = { title: {} }; static styles = css` .card { padding: 1em; border: 1px solid #ddd; } `; render() { return html`${this.title}
基本上就这些。用好 Web Components 的关键是理解其与框架的边界，发挥原生能力的同时保持接口简洁。跨框架不是梦，关键是写标准、轻量、可预测的组件。不复杂但容易忽略。
