用Web Components实现标签页切换组件，核心是封装可复用、样式隔离、语义清晰的自定义元素，依赖Custom Elements+Shadow DOM+HTML Template，支持声明式用法、无障碍访问、属性与事件驱动交互。
用 Web Components 实现标签页切换组件，核心是封装可复用、样式隔离、语义清晰的自定义元素。它不依赖框架，靠原生 Custom Elements + Shadow DOM + HTML Template 实现，兼顾无障碍与交互完整性。
结构设计：用 slot 分离控制区与内容区
组件应支持声明式用法，比如：
<wc-tabs> <wc-tab label="首页">首页内容</wc-tab> <wc-tab label="关于">关于内容</wc-tab> </wc-tabs>
这里 wc-tabs 是容器，wc-tab 是子项。通过 <slot name="tabs"> 抽取 tab 标签，<slot name="panels"> 抽取面板内容，或更简洁地用默认 slot + 属性驱动（如 label 和 active）自动构建 tab 列表与对应面板。
Shadow DOM 隔离样式与逻辑
在 wc-tabs 的 constructor 中调用 this.attachShadow({mode: 'open'})，把内部结构（tab 按钮列表 + 面板容器）和样式全部封装进去。这样：
- 外部 CSS 不会污染组件内按钮或面板的布局
- 组件内样式（如
.tab-button[aria-selected="true"]的高亮色）不会泄漏到全局 - 每个实例独立维护自己的激活状态，互不干扰
无障碍与焦点管理必须内置
Web Components 不自动继承可访问性，需手动补全：
- tab 按钮用
<button role="tab">，面板用<div role="tabpanel"> - 同步
aria-selected和hidden属性，禁用display: none - 点击切换后，立即对目标按钮调用
.focus()；若面板首项是输入框，应把焦点移入面板内 - 监听
keydown（如 ← → Tab），实现键盘导航 —— 这部分逻辑写在组件内部，对外透明
属性与事件驱动交互
组件应响应外部控制：
- 支持
active-index属性设置默认激活项（并响应后续变更） - 触发
tab-change自定义事件，携带detail: { index, label, panel } - 子组件
wc-tab可暴露disabled属性，父组件自动跳过禁用项的 focus 与切换
所有这些行为都在组件类内部完成，使用者只需写 HTML，无需额外 JS 绑定。
