Web Components 可编程焦点的正确处理方式是什么？

不需要使用动态切换tabindex的hack方案，W3C标准已经提供了对应的原生能力，具体实现步骤如下：

• 开启Shadow DOM的delegatesFocus配置
  在自定义元素调用attachShadow()时传入参数{mode: 'open', delegatesFocus: true}。这个特性的作用是自动接管焦点转发逻辑：当调用自定义元素本身的focus()方法，或者锚点跳转指向该自定义元素时，浏览器会自动将焦点落到Shadow DOM内部第一个可聚焦的元素上，完全对齐原生可交互元素的焦点行为，无需手动重写focus()方法。
• 配置静态tabindex属性
  直接给自定义元素设置tabindex="0"即可，不会产生额外的Tab停靠点。开启delegatesFocus后，Tab键导航到该自定义元素时，焦点会直接落到内部可聚焦元素上，不会出现外层自定义元素、内部元素两次停靠的问题，也不会出现tabindex="-1"导致内部Tab停靠点被移除的问题。
• 补全可访问性属性（可选）
  如果你的组件是模拟原生可交互元素的行为，给自定义元素加上对应的ARIA角色属性即可，比如模拟按钮就加role="button"，辅助技术会自动识别其可交互属性。

注：目前所有主流浏览器（Chrome、Firefox、Safari 15.4+）都已经支持delegatesFocus特性，兼容低版本Safari才需要额外做降级处理。

内容的提问来源于stack exchange，提问作者mrtnmgs