Web Components通过Custom Elements、Shadow DOM和HTML Templates实现跨框架复用。1. 使用customElements.define定义自定义标签，如user-info-card；2. Shadow DOM隔离样式与逻辑，避免全局污染；3. 通过observedAttributes监听属性变化，dispatchEvent抛出事件实现通信；4. 可打包为npm包，供React、Vue等项目直接引入使用，实现一次封装、多处运行。
Web Components 是一套浏览器原生支持的技术，能让你创建可复用、封装良好且不依赖框架的 UI 组件。用它封装跨框架的业务组件，核心在于利用其三大特性：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（HTML Templates）。这样封装的组件可以在 React、Vue、Angular 甚至纯 HTML 项目中直接使用。
1. 使用 Custom Elements 定义组件标签
通过 customElements.define() 注册一个自定义 HTML 标签，这是跨框架使用的入口。
例如，封装一个用户信息卡片：class UserInfoCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
<p>connectedCallback() {
const name = this.getAttribute('name') || '未知';
const avatar = this.getAttribute('avatar');</p><pre class='brush:php;toolbar:false;'>this.shadowRoot.innerHTML = `
<div class="card">
<img src="${avatar}" alt="头像" />
<span>${name}</span>
</div>
`;} }
customElements.define('user-info-card', UserInfoCard);
之后在任意框架中都可以直接写：
<user-info-card name="张三" avatar="/avatar.png"></user-info-card>
2. 利用 Shadow DOM 实现样式与逻辑隔离
影子 DOM 能防止外部 CSS 干扰组件内部结构，也能避免组件样式“泄漏”到全局，这对跨项目复用非常关键。
在上面的例子中，this.attachShadow({ mode: 'open' }) 创建了独立的作用域，组件内的样式不会影响页面其他部分。
你可以在 shadowRoot 中注入样式：
this.shadowRoot.innerHTML = `
<style>
.card {
display: flex;
align-items: center;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
img {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 8px;
}
</style>
<div class="card">
<img src="${avatar}" alt="头像" />
<span>${name}</span>
</div>
`;
3. 支持属性传值与事件通信
为了让组件更灵活，需支持从外部传入数据并对外抛出事件，这能让它在 React 或 Vue 中像普通组件一样绑定 props 和 listeners。
- 通过 observedAttributes 监听属性变化
- 使用 attributeChangedCallback 响应变更
- 通过 this.dispatchEvent() 派发自定义事件
static get observedAttributes() {
return ['name', 'avatar'];
}
<p>attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}</p><p>render() {
const name = this.getAttribute('name') || '未知';
const avatar = this.getAttribute('avatar') || 'default.png';</p><p>this.shadowRoot.innerHTML = <code><!-- 同上 --></code>;</p><p>// 绑定事件
this.shadowRoot.querySelector('.card').onclick = () => {
this.dispatchEvent(new CustomEvent('view-profile', {
detail: { name }
}));
};
}
在 Vue 或 React 中监听：
<user-info-card name="李四" @view-profile="handleClick" />
4. 构建与发布为 npm 包（可选）
如果你希望多个项目共用这个组件，可以将其打包成 npm 包。
- 使用 Vite、Rollup 等工具将组件构建成标准 ES Module
- 导出类或调用 define 方法的函数
- 在目标项目中 import 并注册即可使用
import { UserInfoCard } from 'my-components';
customElements.define('user-info-card', UserInfoCard);
基本上就这些。Web Components 的优势在于“一次封装，到处使用”，只要浏览器支持，就能在任何技术栈中嵌入。关键是做好属性通信、样式隔离和事件机制，让组件行为清晰可控。
