Web Components 如何实现标签云分类展示组件

Web Components 实现的标签云组件包含 <tag-category> 和 <tag-item> 两层封装，通过 Shadow DOM 隔离样式、attributeChangedCallback 响应属性变化、CustomEvent 通信，支持跨框架使用，具备流式布局与响应式间距。

用 Web Components 实现标签云分类展示组件，核心是把“分类”和“标签”结构封装成可复用、样式隔离、跨框架可用的自定义元素。它不依赖 Vue 或 React，纯靠浏览器原生能力就能跑，适合中后台系统、设计系统或微前端场景。

结构设计：分层封装分类与标签

标签云本质是“分类容器 + 标签集合”，所以组件结构建议分两层：

1. <tag-category>：负责渲染一个分类标题（如“影视”）+ 其下所有标签项；支持传入 title 属性和 tags 数组（每个 tag 含 name 和 selected）
2. <tag-item>：单个标签按钮，响应点击并派发 select 自定义事件；内部用 Shadow DOM 隔离样式，自动适配选中态（背景色、文字色）

关键实现：Shadow DOM + 属性监听 + 事件通信

以 <tag-item> 为例，重点在三点：

1. 构造函数中调用 this.attachShadow({ mode: 'open' })，插入带样式的模板（含 <span> 和内联 <style>）
2. 静态 getter observedAttributes 声明监听 name 和 selected，在 attributeChangedCallback 中更新文本和 class
3. onClick 触发 new CustomEvent('select', { detail: { name, selected: !this.selected } })，让父组件统一处理状态

样式与布局：流式换行 + 响应式间距

标签云不是简单堆砌，需保证视觉节奏和设备适配：

1. 用 CSS display: flex; flex-wrap: wrap; gap: 8px; 实现自动换行，避免横向溢出
2. 标签尺寸用 min-width: 64px; padding: 6px 12px; 保基本可点区域，圆角设 border-radius: 16px;
3. 字体大小固定（如 14px），不随权重缩放——若需热力图效果，可额外加 font-size 计算逻辑，但多数业务场景保持统一更易维护

使用方式：像原生标签一样嵌入

注册后直接在 HTML、Vue、React 里使用，无需适配器：

<tag-category title="影视"><tag-item name="动作" selected="false"></tag-item><tag-item name="喜剧" selected="true"></tag-item><tag-item name="科幻"></tag-item></tag-category>

父级监听 select 事件即可聚合所有分类下的选择状态，完成筛选逻辑。不复杂但容易忽略。