web components 与现代前端框架可协同工作，实现跨项目复用。1. react 中需注意属性传递、事件监听及警告规避；2. vue 3 可通过配置识别自定义元素，支持属性绑定与事件通信；3. angular 天然兼容 web components，可直接使用并利用 shadow dom 隔离样式；4. 借助 web components 构建跨框架组件库，实现一次开发、多处运行，推荐使用 lit 或 stencil 开发高性能组件，框架负责逻辑，web components 负责可移植 ui。
Web Components 和现代前端框架（如 React、Vue、Angular）可以很好地协同工作，因为它们各自解决不同的问题。Web Components 提供了一种原生的、框架无关的方式来创建可复用的自定义元素，而前端框架则专注于高效的状态管理和组件化开发流程。合理使用两者，可以在保持灵活性的同时提升跨项目复用能力。
1. 在 React 中使用 Web Components
React 可以直接渲染 Web Components，但由于 React 的事件系统和属性传递机制与原生 DOM 有所不同，需要注意以下几点：
- 属性传递：将数据通过 props 传给 Web Component 时，基本类型可以直接传递，对象或数组建议使用字符串化或通过 ref 手动设置
- 事件监听：Web Components 触发的自定义事件在 React 中需要使用 onXxx 形式绑定，并通过 addEventListener 方式处理更复杂的事件逻辑
- 避免警告：React 会对未知的 HTML 属性发出警告，可通过小写属性名或使用 data- 前缀规避
例如：
<my-counter value={count} onIncrement={(e) => setCount(e.detail)} />
2. 在 Vue 中集成 Web Components
Vue 对 Web Components 支持良好，尤其在 Vue 3 中，可以通过配置使 Vue 忽略特定标签作为自定义元素。
立即学习“前端免费学习笔记（深入）”；
- 全局配置：在 app.config.isCustomElement 中声明标签名，让 Vue 将其视为原生元素
- 属性绑定：使用 v-bind 传递属性，复杂数据建议通过 JavaScript 动态赋值
- 事件通信：使用 v-on 监听自定义事件，如 @change="handleChange"
适合将 Web Components 作为 UI 库嵌入 Vue 项目，实现跨团队共享组件。
3. Angular 对 Web Components 的天然兼容性
Angular 本身受 Web Components 思想影响较深，其组件模型与 Shadow DOM、自定义元素理念高度契合。
- 直接使用：无需额外配置即可在模板中使用已注册的自定义元素
- 变更检测：Web Components 内部状态变化不会触发 Angular 脏检查，需确保事件正确抛出以通知父级
- 样式隔离：利用 Shadow DOM 特性避免样式冲突，同时可在 Angular 中通过 ::ng-deep 有限穿透
Angular 项目也常将自身组件打包为 Web Components，供非 Angular 环境使用。
4. 使用 Web Components 实现跨框架组件库
这是两者协同的最大价值所在。你可以将通用 UI 组件（如按钮、弹窗、表格）封装为 Web Components，然后在 React、Vue、Angular 甚至纯 HTML 项目中统一使用。
- 构建一次，多处运行：减少重复开发，保持视觉和行为一致性
- 技术栈解耦：设计系统团队可独立维护组件库，业务团队自由选择框架
- 渐进升级：老项目迁移时，可用 Web Components 作为新旧系统之间的桥梁
工具推荐使用 Lit 或 Stencil 开发轻量、高性能的 Web Components。
基本上就这些。关键在于明确分工：框架负责应用逻辑和状态流，Web Components 负责可移植的 UI 模块。合理设计接口，就能发挥各自优势。
