document.activeElement 不显示阴影根中的焦点元素

Question

document.activeElement 很简洁，但是当在使用影子根的网站上使用它时 - 我得到了外部容器。如何获取嵌套阴影根中的活动元素？

我是否需要爬取具有 ShadowRoot 的元素并在每个级别添加事件监听器？

显示问题的示例：

window.addEventListener('focus', e => {
    if (e.target instanceof Window) return;
  
  console.log({target: e.target, activeElement: document.activeElement})
}, true)

  <input placeholder="level 1" />

  <div id="div2">

    <template shadowrootmode="open">
      <input placeholder="level 2" />

      <div id="div3">
        <template shadowrootmode="open">
          <input placeholder="level 3" />

          <div id="div4">
            <template shadowrootmode="open">
              <input placeholder="level 4" />
            </template>
          </div>
        </template>
      </div>

    </template>
  </div>

Answer 1

我发现你不需要再附加任何事件监听器。

document.activeElement

将指向一个元素，然后检查该元素是否有shadowRoot。如果是的话，你抓住它的 .activeElement ，并继续检查shadowRoot。

document.activeElement.shadowRoot.activeElement.shadowRoot... etc