Web Components 实现跨框架复用的核心是绕过框架运行时、直连浏览器原生能力，需满足结构标准化（template + importNode）、样式隔离（Shadow DOM）和行为解耦（原生生命周期钩子），并严格避免框架依赖与非标实践。
Web Components 在单页应用（SPA）中实现跨框架组件复用，核心在于**绕过框架运行时、直连浏览器原生能力**。它不依赖 React 的 JSX 渲染逻辑、Vue 的响应式系统或 Angular 的模块注入机制，而是以标准 HTML 元素形式存在，天然兼容所有框架——只要该框架支持渲染普通 HTML 标签和处理原生 DOM 事件。
关键前提：用浏览器原生能力封装逻辑与样式
跨框架复用不是“适配”，而是“降级兼容”。必须满足三点：
-
结构标准化：使用
<template>定义可复用模板，避免硬编码 ID 或内联样式；多次实例化时靠document.importNode()克隆，而非cloneNode()（后者丢失表单状态） -
样式隔离：通过
this.attachShadow({ mode: 'open' })创建 Shadow DOM，确保内部 CSS 不被外部覆盖，外部 CSS 也无法穿透影响组件外观 -
行为解耦：不依赖框架生命周期（如 useEffect / onMounted），只响应 Web Components 原生钩子：
connectedCallback（挂载）、disconnectedCallback（卸载）、attributeChangedCallback（属性变更）
在不同 SPA 框架中直接使用，无需额外封装
只要组件已注册（customElements.define('my-button', MyButton)），就能像 <div> 一样写在任何框架的 JSX/Vue SFC/TSX 中：
-
React：直接写
<my-button label="提交" disabled></my-button>；事件监听用onMyClick（需将驼峰转为 kebab-case，如onMyClick→on-my-click），或用addEventListener('my-click', handler) -
Vue：写
<my-button label="提交" :disabled="true"></my-button>；属性绑定自动转为小写横线格式（:disabled→disabled属性），事件用@my-click即可 -
Angular：在
AppModule中调用customElements.define()，模板中直接使用<my-button label="提交"></my-button>；绑定属性用[attr.disabled]，事件用(myClick)
高频组件优先落地，降低迁移成本
不必一次性重写整套 UI 库。从团队实际高频共用组件切入，例如：
- Exception（异常提示）：结构稳定（图标 + 标题 + 描述 + 操作按钮），样式固定，各项目重复率超百次
-
Toast（轻提示）：纯 JS 控制显示/隐藏，无复杂状态管理，只需暴露
show()方法或message属性 - Button / Loading / Popup：交互简单、视觉规范统一，适合快速验证跨框架一致性
这类组件封装后，Vue 项目删掉 v-button，React 项目移除 Button 组件，全部替换成 <wc-button>，即可同步设计语言与行为逻辑。
避免常见陷阱：别让 Web Components 变成“伪跨框架”
很多团队失败，是因为表面用了 Custom Elements，实则仍强耦合某框架：
- 禁止在组件内 import React/Vue：哪怕只为了用一个 hook 或 ref，都会导致无法在其他框架中加载
-
拒绝动态生成 ID：如
id="popup-${Math.random()}"，会破坏 Shadow DOM 隔离性，也干扰自动化测试 -
属性命名用 kebab-case：框架会自动转换（Vue 的
:max-count→ HTMLmax-count），但类名、事件名必须符合规范（my-click而非myClick） -
插槽（
<slot>）是唯一推荐的内容分发方式：比 props 更灵活，且所有框架都原生支持<my-card><p slot="desc">副标题</p></my-card>
