"Shadow DOM delegatesFocus：焦点委托与可访问性实践"

概述在创建 Shadow 根时使用 `delegatesFocus: true` 可使对宿主的聚焦委托到内部可聚焦控件，改善键盘导航与可访问性。需合理设置 `tabIndex` 与标签语义，避免焦点陷阱。示例class MyInput extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'open', delegatesFocus: true }) root.innerHTML = `<label>名称<input type="text"></label>` } } customElements.define('my-input', MyInput) 工程建议语义与顺序：宿主与内部控件的 `tabIndex` 与标签配合；保持合理顺序与标签关联。读屏体验：确保 `label`/ARIA 与错误提示一致；在焦点委托下保持可读性。兼容：不支持时回退到显式聚焦内部元素；测试不同浏览器行为。参考与验证MDN Shadow DOM 文档：https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOMWHATWG/规范与讨论：相关章节与浏览器说明