Shadow DOM中tabindex搭配delegatesFocus:true时双击选中文本失效问题

你的Shadow DOM使用方式没有错误，这是Chrome和Edge浏览器在处理delegatesFocus: true结合Shadow DOM内部带tabindex元素时的一个已知问题。

问题原因 #

delegatesFocus的核心作用是将Shadow DOM内部的焦点操作委托给宿主元素，提升无障碍访问性。但当Shadow DOM内部存在带tabindex的可聚焦元素时，浏览器的文本选择逻辑会和焦点委托机制产生冲突，导致非聚焦元素的双击选中文本功能失效。

场景复现代码 #

失效场景：启用delegatesFocus: true且内部含tabindex元素

<div id="app-root"></div>

<script>
document.querySelector('#app-root').attachShadow({mode: "open", delegatesFocus: true}).innerHTML =
    "<div>无法通过双击选中文本</div>\n" +
    "<div tabindex=\"0\">双击可选中本元素文本</div>\n"
</script>

正常场景1：禁用delegatesFocus且内部含tabindex元素

<div id="app-root"></div>

<script>
document.querySelector('#app-root').attachShadow({mode: "open"}).innerHTML =
    "<div>双击可选中本元素文本</div>\n" +
    "<div tabindex=\"0\">双击可选中本元素文本</div>\n"
</script>

正常场景2：启用delegatesFocus: true且内部无tabindex元素

<div id="app-root"></div>

<script>
document.querySelector('#app-root').attachShadow({mode: "open", delegatesFocus: true}).innerHTML =
    "<div>双击可选中本元素文本</div>\n" +
    "<div>双击可选中本元素文本</div>\n"
</script>

可行解决方案 #

• 方案1：移除不必要的delegatesFocus
  如果你的组件不需要焦点委托的无障碍特性，直接将delegatesFocus设为false（或不传入该参数，默认即为false），即可恢复正常的文本选择功能。

• 方案2：精简tabindex的使用
  只给真正需要聚焦交互的元素添加tabindex，避免在Shadow DOM内部滥用该属性，减少和delegatesFocus的冲突概率。

• 方案3：手动实现双击文本选择
  如果必须保留delegatesFocus: true和tabindex，可以通过监听双击事件，手动触发文本选择：

  const host = document.querySelector('#app-root');
  const shadowRoot = host.attachShadow({mode: "open", delegatesFocus: true});
  
  shadowRoot.innerHTML = `
    <div class="fix-select">无法通过双击选中文本（已修复）</div>
    <div tabindex="0">双击可选中本元素文本</div>
  `;
  
  // 给需要修复的元素添加双击事件
  shadowRoot.querySelector('.fix-select').addEventListener('dblclick', function(e) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  });
  

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