自定义元素实现步骤条向导组件需四步：1. 定义并注册<step-wizard>，继承HTMLElement，用Shadow DOM和attributeChangedCallback管理状态；2. 支持嵌套<step-item>，提取label与slot内容，同步索引控制激活态；3. 提供goTo/next/prev方法及step-change事件实现步骤切换；4. 利用CSS自定义属性和ARIA属性确保样式隔离与无障碍访问。
自定义元素（Custom Element）实现步骤条引导的向导组件，核心是用原生 Web Components 封装可复用、语义清晰、状态可控的步骤导航 UI。不需要框架，纯 JavaScript + HTML 即可完成。
1. 定义自定义元素并注册
继承 HTMLElement，通过 customElements.define() 注册一个带步骤管理逻辑的元素，比如叫 <step-wizard>。它负责协调子步骤（<step-item>）的状态和切换逻辑。
- 在
constructor中调用super()，并设置attachShadow({ mode: 'open' }) - 使用
static get observedAttributes()监听外部传入的属性变化（如current、readonly） - 在
attributeChangedCallback中响应状态更新，比如当前步骤变更后高亮对应项
2. 支持嵌套的步骤项（<step-item>）
让使用者能用语义化方式写步骤内容：
<step-wizard current="2"> <step-item label="基本信息"></step-item> <step-item label="确认订单"></step-item> <step-item label="支付完成"></step-item> </step-wizard>
在 step-wizard 的 connectedCallback 中遍历 this.children 或 this.querySelectorAll('step-item')，提取每个 step-item 的 label 属性和插槽内容（<slot>），生成步骤条 DOM。
- 每个
step-item可以是轻量级自定义元素，只负责渲染自身状态（未开始/进行中/已完成/禁用） - 通过
data-step-index或dataset同步索引，便于step-wizard控制激活态 - 支持 slot 分发标题、描述、图标等，保持结构灵活
3. 实现步骤切换与事件通信
向导组件必须支持前进、后退、跳转，并对外暴露事件供业务控制流程。
- 在 shadow DOM 内部添加「上一步」「下一步」按钮（或由用户自定义操作区）
- 点击时触发
this.dispatchEvent(new CustomEvent('step-change', { detail: { from: old, to: new } })) - 提供方法如
goTo(stepIndex)、next()、prev()，方便 JS 主动控制 - 支持
disabled属性锁定某一步，或通过data-disabled控制单个 step-item 是否可点击
4. 样式隔离与主题友好
利用 Shadow DOM 天然样式隔离，但预留 CSS 自定义属性（CSS Custom Properties）便于主题定制：
- 定义
--step-color-active、--step-color-done、--step-border-radius等变量 - 步骤圆点、连接线、文字颜色都基于这些变量计算
- 允许外部通过
:host或::part()（配合exportparts）微调特定节点，例如<step-item exportparts="dot,label,connector">
不复杂但容易忽略：记得处理键盘导航（Tab / Enter）、屏幕阅读器支持（aria-current、aria-disabled、role="tablist"），让步骤条真正可用。
