:focus doesn't work with shadow DOM

TimothyGu commented 4 years ago

See https://github.com/web-platform-tests/wpt/blob/7d99d2ca0def8468acfaee9aa15076a68efb21ca/shadow-dom/focus/focus-selector-delegatesFocus.html. Essentially, with the following setup:

<!DOCTYPE html>
<body>
<script>
  const host = document.createElement("div");
  host.attachShadow({ mode: "open" });
  document.body.appendChild(host);

  const shadowChild = document.createElement("div");
  shadowChild.innerText = "foo";
  shadowChild.tabIndex = 0;
  host.shadowRoot.appendChild(shadowChild);

  shadowChild.focus();
  console.log(NW.Dom.match(shadowChild, ":focus"), "element in shadow tree matches :focus");
  console.log(NW.Dom.match(host, ":focus"), "host matches :focus");
</script>

However, currently only the latter returns true, since document.activeElement is host. (However, host.shadowRoot.activeElement is shadowChild.)

The linked file has more examples, some using <slot>.

dperini commented 4 years ago

@TimothyGu thank you for reporting. Does browsers support that ? It is something new I have to look into, no previous experience with ShadowDOM. I will let you know as soon as I can find/read some documentation following your links. Have fun !

TimothyGu commented 4 years ago

Yeah, browsers have started to implement it though it is indeed a recent change.

dperini commented 1 year ago

@TimothyGu I am closing this for now since there is no support for Shadow DOM in nwsapi. Also with time we might implement it in future releases.

dperini / nwsapi

:focus doesn't work with shadow DOM #31