Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

See discussion in https://github.com/whatwg/html/pull/7079. Including the effects of that PR, focusing and unfocusing (e.g. via focus() and blur()) a delegatesFocus shadow host uses the flat tree: given #474

Closed
966563058015 opened this issue Oct 13, 2021 · 1 comment
Closed

See discussion in https://github.com/whatwg/html/pull/7079. Including the effects of that PR, focusing and unfocusing (e.g. via focus() and blur()) a delegatesFocus shadow host uses the flat tree: given #474

966563058015 opened this issue Oct 13, 2021 · 1 comment

Comments

@966563058015
Copy link

966563058015 commented Oct 13, 2021 •
edited
Loading

See discussion in whatwg/html#7079. Including the effects of that PR, focusing and unfocusing (e.g. via focus() and blur()) a delegatesFocus shadow host uses the flat tree: given

<!doctype html>
<div id="host">
  <div tabindex=0>In light tree</div>
</div>
<script>
  let host = document.getElementById("host");
  host.attachShadow({ mode: "open", delegatesFocus: true }).innerHTML = `
    <slot></slot>
    <div tabindex=0>In shadow tree</div>
  `;
  host.focus();
</script>

the <div> will be focused, and if you insert host.blur() afterward, the div will be blurred.

@emilio states

I find delegating focus to stuff outside the shadow tree a bit weird, because you call focus(), the focus changes, but activeElement is not the host, and the host doesn't match :focus either.

I'm not sure why delegatesFocus was specified to look for focusable elements using the flat tree rather than the shadow-including tree of the shadow root, seems really weird.

which I tend to agree with. Recall that the main use cases for delegatesFocus are things like <input type="date"> where you want to focus things in the shadow DOM, not the light DOM.

__Originally posted by @domenic in whatwg/html#7207
@pcihon
Copy link
Collaborator

pcihon commented Oct 13, 2021

Hi @966563058015, I'm closing this as off topic. Please see our Contributing.md for the types of feedback we're looking for on our Site Policies in this repo.

@pcihon pcihon closed this as completed Oct 13, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@966563058015 @pcihon