Web Components 是浏览器原生支持的可复用、封装良好、与框架无关的自定义 HTML 元素标准，通过 customElements.define() 注册继承 HTMLElement 的类实现，需含短横线命名（如 my-button），配合 shadow DOM 封装样式与结构，并利用生命周期回调管理行为。

Web Components 是一套浏览器原生支持的前端技术标准，它让开发者能创建可复用、封装良好、与框架无关的自定义 HTML 元素。JavaScript 创建自定义元素，核心是通过 customElements.define() 注册一个继承自 HTMLElement 的类，从而扩展 HTML 的能力。

自定义元素必须满足命名规则

浏览器要求自定义元素名必须包含短横线（-），比如 my-button、data-chart，不能是单个单词如 button 或驼峰式 myButton。这是为了确保与未来 HTML 标准新增的原生标签不冲突。

• ✅ 合法：
• ❌ 非法： 、

用 class 继承 HTMLElement 定义行为

自定义元素本质是一个 JavaScript 类，需继承 HTMLElement，并在其中定义生命周期回调（如 connectedCallback、disconnectedCallback）和属性响应逻辑（配合 static get observedAttributes()）。

• constructor：初始化 shadow DOM、设置初始状态（注意不能在此操作 DOM）
• connectedCallback：元素插入文档时触发，适合渲染、绑定事件
• attributeChangedCallback：当受监听的属性变更时调用，用于响应 props 变化
• disconnectedCallback：元素从 DOM 移除时清理资源（如取消定时器、解绑事件）

用 shadow DOM 实现样式与结构封装

在 constructor 中调用 this.attachShadow({ mode: 'closed' }) 或 'open'，即可为元素创建独立的影子 DOM 树。内部样式不会泄漏到外部，外部样式也默认无法影响内部，实现真正的样式隔离。

• mode: 'open'：可通过 element.shadowRoot 访问，方便调试和测试
• mode: 'closed'：shadowRoot 返回 null，增强封装性（但一般开发中较少用）
• 推荐在 shadow DOM 内部用 标签写 CSS，或动态注入样式表

注册元素并使用

定义好类后，调用 customElements.define('tag-name', Class) 完成注册。之后就能像普通 HTML 标签一样在页面中使用，支持属性、事件、插槽（）等标准特性。

• 注册示例：customElements.define('hello-world', HelloWorld);
• 使用示例：
• 支持 JS 操作：document.querySelector('hello-world').name = 'Bob';

不复杂但容易忽略细节：属性名和 JS 属性名可能不同（如 HTML 属性 user-id 对应 JS 的 userId），需在 attributeChangedCallback 中手动转换；另外，自定义元素在 DOM 中被解析时，若尚未注册，会作为 HTMLUnknownElement 存在，后续注册也不会自动升级——所以建议尽早注册，或使用 customElements.whenDefined() 等待加载完成。