17370845950

Web Components 是浏览器原生支持的规范，由 Custom Elements、Shadow DOM 和 HTML Templates 组成，实现真正封装、独立、跨框架复用的自定义元素。

Web Components 是浏览器原生支持的一套标准 API，不是框架或库，而是由 Custom Elements、Shadow DOM 和 HTML Templates 三部分组成的规范。它让开发者能用纯 JavaScript 创建真正封装、独立、可复用的自定义 HTML 元素。

Web Components 的三大核心能力

这三块技术共同构成了“可复用”的基础：

• Custom Elements：允许你定义自己的 HTML 标签（比如 ），并通过 customElements.define() 注册。只要浏览器支持，这个标签就能像 或 一样直接使用，无需构建工具或运行时依赖。
• Shadow DOM：在组件内部创建一个隔离的 DOM 子树，自带样式和结构封闭性。外部 CSS 不会穿透进来，组件内样式也不会泄漏出去——这意味着同一个 在 React 项目里和纯 HTML 页面中表现完全一致。
• HTML Templates：配合 标签预定义结构，延迟渲染、避免重复解析，提升初始化性能；也便于组织模板逻辑，与 JS 类解耦。

为什么能实现跨项目、跨框架复用

关键在于“不依赖运行时环境”：

• 注册后的自定义元素是全局可用的 DOM 构造，Vue、React、Angular 甚至 jQuery 项目都能直接写 ，不需要适配器或 wrapper 组件。
• 通过 支持内容分发，让使用者决定插什么内容；通过 observedAttributes + attributeChangedCallback 响应属性变更；通过自定义事件（bubbles: true, composed: true）向外通信——接口清晰，行为可控。
• 用 CSS 自定义属性（如 var(--button-bg)）暴露主题变量，外部只需改一组 CSS 变量就能换肤，无需修改组件源码。

命名与设计上的复用保障

细节决定能否长期复用：

• 标签名必须含短横线（如 data-table），避免与未来 HTML 标准冲突；
• 属性尽量语义化且布尔型属性用 presence-based（有即真，无即假），比如 disabled 不需要设 disabled="true"；
• 避免在组件内部操作全局 document 或 window，保持副作用可控；
• 构造函数里只做最小初始化（如 attachShadow），把 DOM 操作和事件绑定放在 connectedCallback 中，确保节点已挂载。

不复杂但容易忽略