web components 是浏览器原生支持的规范，由 custom elements、shadow dom 和 html templates 组成，实现真正封装、独立、跨框架复用的自定义元素。
Web Components 是浏览器原生支持的一套标准 API，不是框架或库，而是由 Custom Elements、Shadow DOM 和 HTML Templates 三部分组成的规范。它让开发者能用纯 JavaScript 创建真正封装、独立、可复用的自定义 HTML 元素。
Web Components 的三大核心能力
这三块技术共同构成了“可复用”的基础：
-
Custom Elements：允许你定义自己的 HTML 标签（比如
<my-button></my-button>），并通过customElements.define()注册。只要浏览器支持，这个标签就能像<div> 或 <code><input>一样直接使用，无需构建工具或运行时依赖。 -
Shadow DOM：在组件内部创建一个隔离的 DOM 子树，自带样式和结构封闭性。外部 CSS 不会穿透进来，组件内样式也不会泄漏出去——这意味着同一个
<my-card></my-card>在 React 项目里和纯 HTML 页面中表现完全一致。 -
HTML Templates：配合
<template></template>标签预定义结构，延迟渲染、避免重复解析，提升初始化性能；也便于组织模板逻辑，与 JS 类解耦。 - 注册后的自定义元素是全局可用的 DOM 构造，Vue、React、Angular 甚至 jQuery 项目都能直接写
<my-toggle disabled></my-toggle>，不需要适配器或 wrapper 组件。 - 通过
<slot></slot>支持内容分发，让使用者决定插什么内容；通过observedAttributes+attributeChangedCallback响应属性变更；通过自定义事件（bubbles: true, composed: true）向外通信——接口清晰，行为可控。 - 用 CSS 自定义属性（如
var(--button-bg)）暴露主题变量，外部只需改一组 CSS 变量就能换肤，无需修改组件源码。 - 标签名必须含短横线（如
data-table），避免与未来 HTML 标准冲突； - 属性尽量语义化且布尔型属性用 presence-based（有即真，无即假），比如
disabled不需要设disabled="true"； - 避免在组件内部操作全局 document 或 window，保持副作用可控；
- 构造函数里只做最小初始化（如 attachShadow），把 DOM 操作和事件绑定放在
connectedCallback中，确保节点已挂载。
为什么能实现跨项目、跨框架复用
关键在于“不依赖运行时环境”：
命名与设计上的复用保障
细节决定能否长期复用：
立即学习“Java免费学习笔记（深入）”；
不复杂但容易忽略
