delegatesFocus 是 Shadow DOM 中用于优化键盘用户焦点流转的参数，启用后点击容器外部可自动聚焦内部首个可聚焦元素，适用于模态表单、下拉选择器等场景，需在 attachShadow 时设为 true 并确保有可聚焦子元素。
delegatesFocus 是 Shadow DOM 中一个关键但常被低估的无障碍支持参数，它直接影响键盘用户在嵌套表单组件中的焦点流转体验。启用后，点击 Shadow DOM 容器外部区域可自动将焦点委托到内部第一个可聚焦元素，避免用户被迫用 Tab 键多次跳转——这对模态表单、折叠面板、自定义下拉等复杂结构尤为实用。
什么时候该设为 true
当你的组件封装了多个可聚焦子元素（如 <input>、<select>、<button>），且希望用户能通过一次点击就进入编辑状态时，应启用 delegatesFocus。典型场景包括：
- 带搜索框的自定义下拉选择器（点击容器即聚焦输入框）
- 展开/收起式表单区块（点击标题栏后焦点自动落进首个字段）
- 卡片式表单项（整个卡片可点击，无需精准点中输入框）
- 模态对话框的主内容区（点击背景区域外的空白处，焦点仍进入首字段）
如何正确启用并验证
在 attachShadow 时传入 { delegatesFocus: true } 即可激活，无需额外 JS 逻辑：
Gateway Monitor Installer
下载
在 macOS 上通过 LaunchAgent 安装、更新、运行和移除 OpenClaw Gateway Monitor + Gateway Watchdog。适用于用户请求一键部署监控的场景。
const host = document.querySelector('#my-form-card');
const shadow = host.attachShadow({ mode: 'open', delegatesFocus: true });
shadow.innerHTML = `
<div class="card">
<h3>联系信息</h3>
<input type="text" placeholder="姓名" autofocus>
<input type="email" placeholder="邮箱">
</div>
`;
验证是否生效：用鼠标点击卡片任意非输入区域，检查浏览器地址栏或 DevTools 的 Elements 面板中，<input> 是否获得 focus 状态；也可按 Tab 键确认焦点顺序是否从该 Shadow Root 开始。
注意边界与兼容性
delegatesFocus 不会改变 Tab 键顺序本身，只影响鼠标点击触发的初始聚焦行为。需同时确保：
- 内部至少有一个元素具有
tabindex="0"或原生可聚焦属性（如input、button） - 避免对 Shadow Root 根节点设置
tabindex="-1"，否则委托可能失效 - Chrome、Edge、Firefox 均已完整支持；Safari 自 iOS 16.4 / macOS 13.3 起稳定支持
- 若组件内含多个逻辑区块（如分步表单），建议配合
autofocus或手动focus()控制入口点
不适用 delegatesFocus 的情况
某些交互模式反而需要禁用它：
- 只读展示型卡片（点击不应触发任何输入）
- 含多个独立焦点域的布局（如左右双面板，各自管理焦点）
- 使用
inert或动态隐藏/显示子树的组件（委托行为可能中断） - 已通过 ARIA
role="application"显式接管键盘导航的富文本编辑器类组件
