启用 delegatesfocus: true 是优化复杂组件无障碍焦点索引最直接有效的方式——它让浏览器自动将外部点击或 tab 导航的焦点精准落到 shadow dom 内部第一个可聚焦元素上，无需手动调用 focus() 或监听事件转发，既保证键盘操作连贯，又确保屏幕阅读器能正确识别交互区域。
启用 delegatesFocus: true 是优化复杂组件无障碍焦点索引最直接有效的方式——它让浏览器自动将外部点击或 Tab 导航的焦点，精准落到 Shadow DOM 内部第一个可聚焦元素上，无需手动调用 focus() 或监听事件转发，既保证键盘操作连贯，又确保屏幕阅读器能正确识别交互区域。
为什么 delegatesFocus 对复杂组件至关重要
模态框、下拉菜单、带操作按钮的输入框等复杂组件，通常把核心可交互元素（如 <input>、<button></button>）封装在 Shadow DOM 中。默认情况下，用户点击组件空白区或按 Tab 键时，焦点停留在宿主元素本身，无法进入内部，导致：
- 键盘用户无法进入内容区，Tab 顺序中断
- 屏幕阅读器播报“静态容器”，而非“可编辑文本框”或“确认按钮”
- 违反 WCAG 2.1 “键盘可操作”（2.1.1）和“名称、角色、值”（4.1.2）要求
正确启用 delegatesFocus 的三步关键操作
该属性必须在创建 shadow root 时声明，不可后期修改，且需配合内部结构设计：
Unified LLM Gateway - One API for 70+ AI models. Route to GPT, Claude, Gemini, Qwen, Deepseek, Grok and more
下载
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
- 调用
attachShadow({ mode: 'open', delegatesFocus: true })—— 模式必须为open才能被辅助技术识别 - 确保 shadow 内存在且仅有一个明确的可聚焦入口：优先使用原生可聚焦元素（如
<input>、<button></button>），或显式设置tabindex="0"的容器；避免多个autofocus - 若组件有动态焦点入口（如下拉展开后焦点移至列表项），需在状态变更时重新确保首个可聚焦元素满足委托条件（例如通过
tabindex="0"动态赋值）
聚焦状态同步：让视觉与语义保持一致
仅开启 delegatesFocus 不足以完成无障碍闭环。宿主元素需准确反映内部聚焦状态，以便提供视觉反馈和语义信息：
- 在 shadow 内可聚焦元素上监听
focus和blur事件（focusin/focusout不穿透 boundary，不可用） - 在事件处理器中更新宿主属性，例如：
this.toggleAttribute('focused', event.type === 'focus') - 用 CSS
:host([focused])控制轮廓、阴影或图标状态，确保键盘用户看到清晰焦点指示
避开常见陷阱
很多性能与无障碍问题源于误用或遗漏细节：
- 不要关闭
delegatesFocus后自行调用input.focus()：这会跳过浏览器原生 Tab 顺序计算，破坏焦点流，且屏幕阅读器可能无法同步播报 - 避免在 shadow 外层监听
click并手动聚焦——既增加 JS 开销，又无法响应 Shift+Tab 或屏幕阅读器虚拟光标导航 - 对于含多个逻辑区域的组件（如带搜索+结果列表的下拉），应确保委托目标是当前活跃区域的第一个可聚焦项，必要时结合
inert或aria-hidden隐藏非活跃区域
