delegatesfocus 是 attachshadow 的布尔配置项，默认 false，决定 tab 到 shadow host 时是否自动将焦点委托给 shadow root 内首个可聚焦子元素；启用后可避免焦点卡在不可见宿主上，提升表单组件可访问性。

delegatesFocus 是什么，为什么它影响 Tab 导航

delegatesFocus 是 attachShadow 接收的配置项之一，类型为布尔值，默认 false。它不控制“是否能聚焦”，而是决定：当用户用键盘 Tab 切换焦点、且当前焦点落在 Shadow Host（宿主元素）上时，浏览器是否自动将焦点“委托”到 Shadow Root 内部第一个可聚焦子元素（如 <input>、<button></button>）。

没启用时，Tab 到宿主元素就停住，焦点卡在不可见的容器上，用户必须再按一次 Tab 或用鼠标点进去——这对表单组件极其不友好。

什么时候必须设为 true

以下场景中，delegatesFocus={true} 不是可选项，而是可访问性刚需：

• 自定义 <my-input></my-input>、<my-select></my-select> 等封装了原生控件的表单组件
• 模态框（<modal-dialog></modal-dialog>）内含多个可聚焦元素，但宿主本身需参与 Tab 顺序
• 复合组件如带搜索框的下拉选择器（combobox），宿主是 <div role="combobox">，内部有 <code><input> 和 <ul></ul>

  注意：delegatesFocus 仅在 mode: 'open' 下生效；mode: 'closed' 时该字段被忽略，且无法通过 JS 访问 root，自然也无法委托焦点。

  

  frigatebird

  使用 frigatebird npm 包在命令行与 X 交互，提供类鸟命令对等、发布/回复/文章功能以及列表自动化，且无需 X API 密钥。

  下载

  React 中使用 delegatesFocus 的实操要点

  在 React 封装 Shadow DOM 组件时（例如基于 react-shadow 或手写 useLayoutEffect），关键不是“加个 prop”，而是确保整个焦点链路闭环：

  • 宿主元素必须本身可聚焦：添加 tabIndex={0} 或使用语义化标签（如 <button></button>）作为宿主
  • delegatesFocus 要和 mode 一起传给 attachShadow，不能只设前者
  • Shadow Root 内部第一个可聚焦元素需真实存在、未被 disabled 或 hidden，且 tabindex 不为 -1
  • 避免在 Shadow 内部用 focus() 手动抢焦点——这会打断浏览器原生委托逻辑，导致 Tab 顺序错乱

  示例（简化版）：

  function MyInput({ value, onChange }) {
    const ref = useRef(null);
    useLayoutEffect(() => {
      if (ref.current) {
        const root = ref.current.attachShadow({
          mode: 'open',
          delegatesFocus: true // ← 必须显式开启
        });
        root.innerHTML = `
          <input type="text" value="${value || ''}" tabindex="0">
        `;
        const input = root.querySelector('input');
        input.addEventListener('input', e => onChange?.(e.target.value));
      }
    }, []);
  
    return <div ref="{ref}" tabindex="0"></div>; // ← 宿主自身可聚焦
  }

  容易被忽略的兼容性与调试陷阱

  delegatesFocus 表面简单，但实际落地常因细节失效：

  • Chrome / Edge 110+、Firefox 106+ 支持良好；Safari 16.4+ 才开始支持，旧版 Safari 会静默忽略该参数
  • DevTools 中检查焦点时，若看到焦点停在宿主上不动，先确认：宿主是否真有 tabIndex？Shadow Root 是否已挂载完成？内部 input 是否被 display: none 或 visibility: hidden 隐藏？
  • 若组件内用了 slot 投影内容，delegatesFocus 不会委托到 slot 中的内容——它只作用于 Shadow Tree 原生子节点
  • 配合 ARIA 使用时，role="combobox" 等复合角色必须配 aria-controls 或 aria-expanded，否则屏幕阅读器仍可能跳过宿主

  真正难的不是设 true，而是让整个组件从 DOM 结构、属性设置、事件响应到 ARIA 语义全部对齐浏览器焦点委托的预期路径——少一环，Tab 就断在半路。