如何利用Web Components技术构建可复用的UI组件？

Web Components 由自定义元素、影子 DOM 和 HTML 模板组成，1. 通过 customElements.define 定义标签；2. 利用 attachShadow 实现样式结构隔离；3. 使用 template 预定义可复用结构；4. 支持属性监听、事件派发与 slot 内容分发，实现高内聚低耦合的跨项目组件，适用于设计系统与嵌入式工具，具备原生支持与长期稳定性。

Web Components 是一套浏览器原生支持的技术，能让开发者创建可复用、封装良好且无需依赖框架的 UI 组件。它由三项核心技术组成：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（<template>）。掌握这些技术，就能构建出真正独立、可跨项目使用的 UI 组件。

1. 使用自定义元素定义组件标签

自定义元素允许你创建新的 HTML 标签，比如 <my-button> 或 <user-card>。通过 JavaScript 中的 customElements.define() 方法注册组件类。

组件类需继承 HTMLElement 或其子类，并在其中编写逻辑：

• 定义一个类，例如 class MyButton extends HTMLElement {}
• 在 constructor 中初始化状态或绑定事件
• 调用 customElements.define(‘my-button’, MyButton) 注册标签

注册后，就可以像普通 HTML 元素一样使用 <my-button></my-button>。

2. 利用影子 DOM 实现样式与结构隔离

影子 DOM 能将组件的内部结构和样式与页面其他部分隔离开，避免样式污染和选择器冲突。

在组件构造函数中调用 this.attachShadow({ mode: ‘open’ }) 创建影子根，然后将模板内容插入其中：

• attachShadow 返回一个影子根对象
• 使用 innerHTML 或 append() 将结构添加到影子根
• 影子内部的 CSS 不会影响外部，外部样式也默认不穿透

这样即使组件内写了 button { color: red }，也不会影响页面其他按钮。

3. 使用 HTML 模板预定义结构

<template> 元素可以存放不会立即渲染的 HTML 结构，适合用于组件的默认布局。

将模板写在页面中或动态生成，然后在自定义元素中克隆使用：

• 在 template 标签中编写组件的 HTML 结构
• 通过 document.querySelector(‘template’).content.cloneNode(true) 获取副本
• 插入到影子 DOM 中

这种方式让结构更清晰，也便于维护和复用模板代码。

4. 支持属性、事件与插槽增强交互性

为了让组件更灵活，需要支持属性传值、事件通知和内容分发。

可以通过以下方式实现：

• 使用 get/setAttribute 读写 HTML 属性，在 attributeChangedCallback 中响应变化
• 定义 observedAttributes 静态属性来监听特定属性变更
• 使用 <slot> 实现内容投影，让用户向组件注入自定义内容
• 通过 this.dispatchEvent(new CustomEvent(‘submit’)) 触发自定义事件

这样组件就能接收输入、反馈状态，具备良好的封装性和扩展性。

基本上就这些。Web Components 不依赖任何框架，适合构建设计系统、嵌入式小工具或跨项目共享的通用组件。虽然生态不如 React 或 Vue 丰富，但它的原生性和兼容性让它在特定场景下非常实用。只要遵循标准，组件就能长期稳定运行。