Should delegatesFocus use the flat tree? #7207

domenic · 2021-10-12T20:04:11Z

See discussion in #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 tabindex=0>In light tree</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.

The alternate proposal is that delegatesFocus should use the shadow tree. In this case, in the above example, the <div tabindex=0>In shadow tree</div> would get focus delegated to it, and document.activeElement would be the shadow host, and :focus would match the host.

The text was updated successfully, but these errors were encountered:

domenic · 2021-10-15T21:57:19Z

@mfreed7, do you find the arguments here convincing? I think we should probably use the shadow tree instead of the flat tree, for both blur() and focus(); we could try to find some web developers to ask, but based on the known use cases for delegatesFocus I think shadow tree is correct.

mfreed7 · 2021-10-19T00:23:37Z

Yeah, I do find them a bit convincing. But as I mentioned, I'd feel better getting some input from developers that use delegatesFocus. Have we heard of any use cases that involve focusing slotted light dom content? I would hate to resolve this in favor of using the shadow root's shadow-including subtree, change browser behavior, and then find out what the critical use case was for instead using the flat tree.

Absent any such developer input, I suppose I could be convinced by the above arguments. I do think it sounds a bit funny to focus light dom slotted content. So if we're in a hurry to resolve this one way or the other, I'm ok changing Chromium's focus() to not use the flat tree.

emilio · 2021-10-19T10:50:30Z

I'm not on a massive rush other than "the longer we wait to change this, the easier it is for people to depend on it"

domenic · 2021-10-20T20:15:05Z

Trying to get developer feedback seems fair. I think you're more connected to the web components developer-using community than I am these days, so could you take point on that?

Edit: I also tweeted, to do my part :) https://twitter.com/domenic/status/1450919182850211849

I don't think we're in a big hurry, but it does stand out as a wart. And I got the impression it was hurting Firefox's progress on shipping some stuff?

nemzes · 2021-10-20T22:20:15Z

I'm my limited experience using WCs, this change seems to make sense and is in line with other isolation models. If I want to focus/blur some slotted content I should be able to do that regardless of the shadow DOM by keeping a reference to the slotted light DOM. I see delegatesFocus as part of the API into the WC, not the slotted content.

WickyNilliams · 2021-10-21T07:58:17Z

This changes makes sense to me. I've only dabbled with delegatesFocus, due to lack of broad browser support, but i would have been surprised to discover that it can delegate to slotted content. I specifically want this to delegate to my shadow elements, that's the benefit of the feature imo

bathos · 2021-10-21T10:28:05Z

I'd feel better getting some input from developers that use delegatesFocus

Just one data point but I have used it a fair amount and was under the impression that the proposed behavior was already how it worked. I either got lucky and just never had slots prior to the first in-shadow focusable or possibly just learned I have some bugs I don't know about!

emilio · 2021-10-21T10:36:31Z

Seems there's no great compelling argument for the current behavior then... I'm happy to update the WPTs and Gecko. @domenic can / do you want to fix the spec? It'd probably take me a bit more than you, but if you're busy I can try :-)

emilio · 2021-10-21T11:07:49Z

https://bugzilla.mozilla.org/show_bug.cgi?id=1737020 has a patch + tests

domenic · 2021-10-21T14:48:10Z

Sure, I'm happy to fix the spec. I will do it by expanding the scope of #7079.

mfreed7 · 2021-10-21T15:33:08Z

Thanks for tweeting, @domenic. Based on seemingly universal support for not including slotted content, I also agree. Let's land it.

Thanks, I appreciate you gathering some additional input!

This behavior is much more reasonable and aligns with developers expectations better, see whatwg/html#7207. Differential Revision: https://phabricator.services.mozilla.com/D129146 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1737020 gecko-commit: e41c536602c68eb6ad42e53e0d2a7f7a4209931e gecko-reviewers: smaug, sefeng

…n the flat tree. r=smaug,sefeng This behavior is much more reasonable and aligns with developers expectations better, see whatwg/html#7207. Differential Revision: https://phabricator.services.mozilla.com/D129146

This behavior is much more reasonable and aligns with developers expectations better, see whatwg/html#7207. Differential Revision: https://phabricator.services.mozilla.com/D129146 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1737020 gecko-commit: e41c536602c68eb6ad42e53e0d2a7f7a4209931e gecko-reviewers: smaug, sefeng

…n the flat tree. r=smaug,sefeng This behavior is much more reasonable and aligns with developers expectations better, see whatwg/html#7207. Differential Revision: https://phabricator.services.mozilla.com/D129146

* Make it use the shadow tree instead of the flat tree. Closes #7207. * Make it work with the unfocusing steps symmetrically to the focusing steps. Closes #7070.

9ba7124 updated delegatesFocus to use the shadow tree, as part of #7207. However we forgot to update the autofocus="" processing in the same way.

This behavior is much more reasonable and aligns with developers expectations better, see whatwg/html#7207. Differential Revision: https://phabricator.services.mozilla.com/D129146 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1737020 gecko-commit: e41c536602c68eb6ad42e53e0d2a7f7a4209931e gecko-reviewers: smaug, sefeng

* Make it use the shadow tree instead of the flat tree. Closes whatwg#7207. * Make it work with the unfocusing steps symmetrically to the focusing steps. Closes whatwg#7070.

9ba7124 updated delegatesFocus to use the shadow tree, as part of whatwg#7207. However we forgot to update the autofocus="" processing in the same way.

* Make it use the shadow tree instead of the flat tree. Closes whatwg#7207. * Make it work with the unfocusing steps symmetrically to the focusing steps. Closes whatwg#7070.

9ba7124 updated delegatesFocus to use the shadow tree, as part of whatwg#7207. However we forgot to update the autofocus="" processing in the same way.

domenic added the topic: shadow Relates to shadow trees (as defined in DOM) label Oct 12, 2021

domenic mentioned this issue Oct 12, 2021

Fixes to delegatesFocus #7079

Merged

3 tasks

966563058015 mentioned this issue Oct 13, 2021

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 github/site-policy#474

Closed

annevk added the topic: focus label Oct 15, 2021

emilio added the agenda+ To be discussed at a triage meeting label Oct 15, 2021

moz-wptsync-bot mentioned this issue Oct 21, 2021

[Gecko Bug 1737020] Update delegatesFocus to use its shadow tree rather than the flat tree. web-platform-tests/wpt#31349

Merged

ekashida mentioned this issue Oct 21, 2021

Use the shadow tree instead of the flat tree when delegating focus salesforce/lwc#2543

Open

domenic added a commit that referenced this issue Oct 28, 2021

Fixes to delegatesFocus

8615199

* Make it use the shadow tree instead of the flat tree. Closes #7207. * Make it work with the unfocusing steps symmetrically to the focusing steps. Closes #7070.

domenic closed this as completed in #7079 Nov 1, 2021

domenic added a commit that referenced this issue Nov 1, 2021

Fixes to delegatesFocus

9ba7124

* Make it use the shadow tree instead of the flat tree. Closes #7207. * Make it work with the unfocusing steps symmetrically to the focusing steps. Closes #7070.

domenic added a commit that referenced this issue Nov 1, 2021

Also fix delegatesFocus and autofocus=""

63b3e9d

9ba7124 updated delegatesFocus to use the shadow tree, as part of #7207. However we forgot to update the autofocus="" processing in the same way.

domenic mentioned this issue Nov 1, 2021

Also fix delegatesFocus and autofocus="" #7284

Merged

3 tasks

domenic added a commit that referenced this issue Nov 2, 2021

Also fix delegatesFocus and autofocus=""

6b24119

9ba7124 updated delegatesFocus to use the shadow tree, as part of #7207. However we forgot to update the autofocus="" processing in the same way.

dandclark pushed a commit to dandclark/html that referenced this issue Dec 4, 2021

Fixes to delegatesFocus

302559e

* Make it use the shadow tree instead of the flat tree. Closes whatwg#7207. * Make it work with the unfocusing steps symmetrically to the focusing steps. Closes whatwg#7070.

dandclark pushed a commit to dandclark/html that referenced this issue Dec 4, 2021

Also fix delegatesFocus and autofocus=""

24d0840

9ba7124 updated delegatesFocus to use the shadow tree, as part of whatwg#7207. However we forgot to update the autofocus="" processing in the same way.

mfreed7 pushed a commit to mfreed7/html that referenced this issue Jun 3, 2022

Fixes to delegatesFocus

5524251

* Make it use the shadow tree instead of the flat tree. Closes whatwg#7207. * Make it work with the unfocusing steps symmetrically to the focusing steps. Closes whatwg#7070.

mfreed7 pushed a commit to mfreed7/html that referenced this issue Jun 3, 2022

Also fix delegatesFocus and autofocus=""

5180d9c

9ba7124 updated delegatesFocus to use the shadow tree, as part of whatwg#7207. However we forgot to update the autofocus="" processing in the same way.

jcfranco mentioned this issue Aug 13, 2022

Consistent focus/blur eventing across components Esri/calcite-design-system#5147

Open

7 tasks

domenic mentioned this issue May 8, 2023

Focus delegate algorithm doesn't consider elements assigned to slot #9245

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Should delegatesFocus use the flat tree? #7207

Should delegatesFocus use the flat tree? #7207

domenic commented Oct 12, 2021 •

edited

Loading

domenic commented Oct 15, 2021

mfreed7 commented Oct 19, 2021

emilio commented Oct 19, 2021

domenic commented Oct 20, 2021 •

edited

Loading

nemzes commented Oct 20, 2021

WickyNilliams commented Oct 21, 2021 •

edited

Loading

bathos commented Oct 21, 2021

emilio commented Oct 21, 2021

emilio commented Oct 21, 2021

domenic commented Oct 21, 2021

mfreed7 commented Oct 21, 2021

Should delegatesFocus use the flat tree? #7207

Should delegatesFocus use the flat tree? #7207

Comments

domenic commented Oct 12, 2021 • edited Loading

domenic commented Oct 15, 2021

mfreed7 commented Oct 19, 2021

emilio commented Oct 19, 2021

domenic commented Oct 20, 2021 • edited Loading

nemzes commented Oct 20, 2021

WickyNilliams commented Oct 21, 2021 • edited Loading

bathos commented Oct 21, 2021

emilio commented Oct 21, 2021

emilio commented Oct 21, 2021

domenic commented Oct 21, 2021

mfreed7 commented Oct 21, 2021

domenic commented Oct 12, 2021 •

edited

Loading

domenic commented Oct 20, 2021 •

edited

Loading

WickyNilliams commented Oct 21, 2021 •

edited

Loading