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 = ` 
${name} `;
}}
customElements.define('user-info-card', UserInfoCard);
之后在任意框架中都可以直接写：
2. 利用 Shadow DOM 实现样式与逻辑隔离
影子 DOM 能防止外部 CSS 干扰组件内部结构，也能避免组件样式“泄漏”到全局，这对跨项目复用非常关键。
在上面的例子中，this.attachShadow({ mode: 'open' }) 创建了独立的作用域，组件内的样式不会影响页面其他部分。
你可以在 shadowRoot 中注入样式：
this.shadowRoot.innerHTML = ` .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; } @@##@@ ${name} `;
3. 支持属性传值与事件通信
为了让组件更灵活，需支持从外部传入数据并对外抛出事件，这能让它在 React 或 Vue 中像普通组件一样绑定 props 和 listeners。
通过 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 =
// 绑定事件this.shadowRoot.querySelector('.card').onclick = () => {this.dispatchEvent(new CustomEvent('view-profile', {detail: { name }}));};}
在 Vue 或 React 中监听：
4. 构建与发布为 npm 包（可选）
如果你希望多个项目共用这个组件，可以将其打包成 npm 包。
使用 Vite、Rollup 等工具将组件构建成标准 ES Module导出类或调用 define 方法的函数在目标项目中 import 并注册即可使用main.js 中注册：
import { UserInfoCard } from 'my-components';customElements.define('user-info-card', UserInfoCard);
基本上就这些。Web Components 的优势在于“一次封装，到处使用”，只要浏览器支持，就能在任何技术栈中嵌入。关键是做好属性通信、样式隔离和事件机制，让组件行为清晰可控。
以上就是如何用Web Components封装跨框架的业务组件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526766.html
微信扫一扫 
支付宝扫一扫 
