如何使具有 shadow DOM 的 web 组件的 focus()、tabindex 和文本突出显示工作？

Question

我正在制作包含影子 DOM 的可重用 Web 组件，目前我在焦点方面遇到了问题。

我有一个包含本机输入和一些文本的组件。

我正在尝试进行以下工作：

• 在组件上调用.focus()将聚焦其内部原生输入
• 使用属性tabindex有效
• 按“tab”不会聚焦组件，而是聚焦其内部的原生输入
• 允许突出显示文本（使用鼠标 mousedown + 拖动）

以下是我尝试过的一些方法： https://codepen.io/Spirielle/pen/RwBwJNY

最初我在组件影子 DOM 上使用delegatesFocus 。 它适用于焦点和选项卡，但会使组件内的文本无法选择。

然后我尝试删除delegatesFocus ，而是在组件上调用focus时调用内部输入focus方法，但现在当在组件上设置属性tabindex时我必须按两次 tab。

Answer 1

有人给了我一个足够好的解决方案，所以我想我会分享:)

我们绑定onfocus而不是focus

  this.onfocus = opts => {
    inner.focus(opts);
  };

它并不完美，因为我们需要在文本中单击两次以突出显示它，但除此之外，所有 4 个提到的用例都有效。

我用这个解决方案更新了代码笔。 https://codepen.io/Spirielle/pen/RwBwJNY

如果这种方法可能会发生可怕的事情，请随意提出其他建议或发表评论。