Web Components 实现的标签云组件包含 <tag-category> 和 <tag-item> 两层封装，通过 Shadow DOM 隔离样式、attributeChangedCallback 响应属性变化、CustomEvent 通信，支持跨框架使用，具备流式布局与响应式间距。
用 Web Components 实现标签云分类展示组件，核心是把“分类”和“标签”结构封装成可复用、样式隔离、跨框架可用的自定义元素。它不依赖 Vue 或 React，纯靠浏览器原生能力就能跑，适合中后台系统、设计系统或微前端场景。
结构设计：分层封装分类与标签
标签云本质是“分类容器 + 标签集合”，所以组件结构建议分两层：
-
<tag-category>：负责渲染一个分类标题（如“影视”）+ 其下所有标签项；支持传入
title属性和tags数组（每个 tag 含name和selected） -
<tag-item>：单个标签按钮，响应点击并派发
select自定义事件；内部用 Shadow DOM 隔离样式，自动适配选中态（背景色、文字色）
关键实现：Shadow DOM + 属性监听 + 事件通信
以 <tag-item> 为例，重点在三点：
- 构造函数中调用
this.attachShadow({ mode: 'open' })，插入带样式的模板（含<span>和内联<style>） - 静态 getter
observedAttributes声明监听name和selected，在attributeChangedCallback中更新文本和 class -
onClick触发new CustomEvent('select', { detail: { name, selected: !this.selected } })，让父组件统一处理状态
样式与布局：流式换行 + 响应式间距
标签云不是简单堆砌，需保证视觉节奏和设备适配：
- 用 CSS
display: flex; flex-wrap: wrap; gap: 8px;实现自动换行，避免横向溢出 - 标签尺寸用
min-width: 64px; padding: 6px 12px;保基本可点区域，圆角设border-radius: 16px; - 字体大小固定（如 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 事件即可聚合所有分类下的选择状态，完成筛选逻辑。不复杂但容易忽略。
