Web Components 由哪些技术组成？和框架组件有什么区别？
简化版
Web Components 是浏览器原生组件体系，主要包括 Custom Elements、Shadow DOM 和 HTML Templates。它能创建可复用、框架无关的自定义元素；和框架组件相比，它更接近平台标准，但状态管理、模板语法、生态和开发体验通常不如 Vue/React 完整。
详细版
组成：
- Custom Elements：定义自定义标签和生命周期。
- Shadow DOM：封装内部 DOM 和样式。
- Template：声明可复用模板。
- ES Modules：组织组件代码。
适合：
- 跨框架复用的设计系统组件。
- 微前端公共组件。
- 第三方可嵌入组件。
- 长生命周期、希望少绑定框架的基础组件。
注意点：
- Shadow DOM 样式隔离也会带来主题定制成本。
- 表单、SSR、无障碍、事件设计要额外处理。
- 框架生态和开发效率仍有优势。
完整版教学
一、Web Components 解决跨框架复用
React 组件通常只能自然运行在 React 应用里，Vue 组件也依赖 Vue 运行时。Web Components 的目标是让组件成为浏览器认识的自定义元素，例如 <user-card>，任何框架或原生页面都能使用。
这对设计系统和微前端很有吸引力。一个公司有 React、Vue、Angular 和老页面，如果公共按钮、弹窗、播放器能用 Web Components 输出，就能降低多套实现成本。
<user-card user-id="1001"></user-card>二、Custom Elements 定义标签和生命周期
Custom Elements 允许你注册一个自定义标签，并在元素挂载、卸载、属性变化时执行逻辑。标签名通常必须包含连字符，避免和未来 HTML 标准标签冲突。
class UserCard extends HTMLElement {
connectedCallback() {
this.innerHTML = '<p>用户卡片</p>'
}
}
customElements.define('user-card', UserCard)它提供的是底层生命周期，不提供 React/Vue 那种完整响应式、模板编译和状态管理。复杂组件仍需要自己组织工程能力或配合库。
三、Shadow DOM 提供样式和 DOM 隔离
Shadow DOM 会把组件内部 DOM 挂到一个独立的 shadow tree 中。外部页面的 CSS 不容易污染组件内部，组件内部样式也不容易影响外部。这对第三方组件非常重要。
但隔离也有代价。业务方想统一主题、覆盖样式、做端到端测试时，Shadow DOM 会增加难度。需要通过 CSS Custom Properties、parts、slots 等机制开放定制点。
| 能力 | 好处 | 代价 |
|---|---|---|
| Custom Elements | 原生标签复用 | 开发体验较底层 |
| Shadow DOM | 样式隔离 | 定制和测试更复杂 |
| Template | 复用结构 | 缺少高级模板语法 |
| Slot | 内容分发 | API 设计要清晰 |
四、Template 和 Slot 负责结构复用与内容分发
template 可以定义不会立即渲染的 DOM 片段，组件创建时克隆使用。slot 允许使用者把外部内容插入组件内部指定位置，类似框架组件的插槽。
<template id="cardTpl">
<style>.card { padding: 12px; }</style>
<div class="card"><slot></slot></div>
</template>如果组件需要可扩展内容，比如卡片标题、按钮区域、列表项，slot 设计会直接影响可用性。slot 太少不灵活，slot 太多 API 又复杂。
五、和框架组件的差别在抽象层级
Web Components 是平台能力，负责“定义元素、封装 DOM、样式隔离”。React/Vue 是应用开发框架，负责状态更新、模板语法、路由生态、开发工具、SSR 等更高层能力。两者不是完全替代关系。
数字例子：一个按钮、头像、评分组件可能用 Web Components 很合适；一个包含路由、数据流、权限和复杂表单的后台系统，用 Vue/React 会更高效。平台标准强在通用，框架强在应用生产力。
六、工程落地要关注表单、事件和 SSR
Web Components 要和外部通信，通常通过属性、方法和自定义事件。事件是否冒泡、是否穿透 Shadow DOM，要明确设置。表单关联组件还要处理和原生 form 的集成。SSR 和 hydration 也需要额外方案。
例如自定义日期选择器应触发标准化事件，并让框架应用能监听。事件 payload 不应暴露内部 DOM 细节，而应提供稳定业务值。
记忆钩子：Web Components 是浏览器原生“组件底座”，不是一个完整应用框架。
七、常见误区与追问
- 误区：Web Components 可以完全替代 React/Vue。 它解决原生组件封装，不提供完整应用开发生态。
- 误区：Shadow DOM 只有好处。 样式隔离会增加主题定制、测试和样式覆盖成本。
- 误区：自定义元素事件随便派发即可。 要设计事件名、payload、冒泡和跨 Shadow 边界行为。
- 追问：为什么自定义标签名要带连字符？ 避免和标准 HTML 标签冲突，这是 Custom Elements 的命名规则。
- 追问：跨框架组件库适合用什么？ Web Components 是一个选择，尤其适合基础 UI 和第三方嵌入组件。
- 追问：如何开放样式定制？ 使用 CSS 变量、part、slot 或明确的主题属性。
八、加强记忆
Web Components 用“三件套”记：Custom Elements 定义标签，Shadow DOM 做隔离，Template/Slot 复用结构和分发内容。它适合跨框架基础组件，但不是完整框架；落地时重点看样式定制、事件协议、表单集成和 SSR 方案。