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' });
}
connectedCallback() {
const name = this.getAttribute('name') || '未知';
const avatar = this.getAttribute('avatar');
this.shadowRoot.innerHTML = `
zuojiankuohaophpcndiv class="card"youjiankuohaophpcn
zuojiankuohaophpcnimg src="${avatar}" alt="头像" /youjiankuohaophpcn
zuojiankuohaophpcnspanyoujiankuohaophpcn${name}zuojiankuohaophpcn/spanyoujiankuohaophpcn
zuojiankuohaophpcn/divyoujiankuohaophpcn
`;}
}
customElements.define('user-info-card', UserInfoCard);
之后在任意框架中都可以直接写：
2. 利用 Shadow DOM 实现样式与逻辑隔离
影子 DOM 能防止外部 CSS 干扰组件内部结构，也能避免组件样式“泄漏”到全局，这对跨项目复用非常关键。
在上面的例子中，this.attachShadow({ mode: 'open' }) 创建了独立的作用域，组件内的样式不会影响页面其他部分。
你可以在 shadowRoot 中注入样式：this.shadowRoot.innerHTML = `
@@##@@
${name}
`;
3. 支持属性传值与事件通信
为了让组件更灵活，需支持从外部传入数据并对外抛出事件，这能让它在 React 或 Vue 中像普通组件一样绑定 props 和 listeners。
JTBC网站内容管理系统5.0.3.1
JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也
下载
- 通过 observedAttributes 监听属性变化
- 使用 attributeChangedCallback 响应变更
- 通过 this.dispatchEvent() 派发自定义事件
static get observedAttributes() {
return ['name', 'avatar'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}
render() {
const name = this.getAttribute('name') || '未知';
const avatar = this.getAttribute('avatar') || 'default.png';
this.shadowRoot.innerHTML = zuojiankuohaophpcn!-- 同上 --youjiankuohaophpcn;
// 绑定事件
this.shadowRoot.querySelector('.card').onclick = () => {
this.dispatchEvent(new CustomEvent('view-profile', {
detail: { name }
}));
};
}
在 Vue 或 React 中监听：
4. 构建与发布为 npm 包（可选）
如果你希望多个项目共用这个组件，可以将其打包成 npm 包。
- 使用 Vite、Rollup 等工具将组件构建成标准 ES Module
- 导出类或调用 define 方法的函数
- 在目标项目中 import 并注册即可使用
import { UserInfoCard } from 'my-components';
customElements.define('user-info-card', UserInfoCard);
基本上就这些。Web Components 的优势在于“一次封装，到处使用”，只要浏览器支持，就能在任何技术栈中嵌入。关键是做好属性通信、样式隔离和事件机制，让组件行为清晰可控。
