[ShadyDOM] Missing delegatesFocus feature for attachShadow()

[smalluban]

One of the users of hybrids library (UI library for creating web components) asked for support deletagesFocus feature of the Shadow DOM (hybridsjs/hybrids#13). Surprisingly, I wasn't aware of that feature.

These are links to the specs and issue on GitHub (The issue is from 2015):
https://w3c.github.io/webcomponents/spec/shadow/#focus
WICG/webcomponents#126

I searched for "delegatesFocus" in this repository, but with no luck to find anything. The code for attachShadow for now uses only "mode" option: https://github.com/webcomponents/shadydom/blob/e0e5db6cdd23aed5df30b49d73f309b179b7e4bd/src/attach-shadow.js#L58

I have started implementing a feature for the hybrids library and discovered, that it works in all native implementations - Chrome, Safari and Firefox (with turn on flags). However, for polyfilled browsers, obviously, it doesn't.

Are there any plans to support that feature?

EDIT: Ok, my test was a little bit wrong about support... I checked a demo page linked from some discussion (https://takayoshikochi.github.io/tabindex-focus-navigation-explainer/demo/date-input.html) and now I am more confused about it. It uses 'delegatesFocus' in ShadowRoot.prototype code to check support, so I checked it for Safari and Firefox. They don't support it... And that demo looks like it works with or without delegatesFocus switch actually the same...

[amarajs]

👍

[attilapuskas]

We've faced with the same issue which was tricky to track down.

I guess implementing the delegatesFocus behavior could be quite expensive concerning the performance and also would require some ShadyCSS changes to cope with manually updating :focus usages.

Though at least a mentioning in the "limitations" section of the readme about that would be really cool.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ianldgs]

This is quite important if you have a styleguide/component library with a button or input component that uses the shadow dom, given delegatesFocus is not supported on Safari and Firefox.

For anyone looking at this, you could use: https://github.com/calebdwilliams/delegates-focus-polyfill, but might need some fixes.

I ended up with a shadow-focus-portal component that also automatically adds tabindex to the parent element, so that it's easily findable by .querySelector('[tabindex]:not([tabindex="-1"]'), but has some downsides.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.