support for delegatesFocus

[MrAntix]

Stencil version:

 @stencil/[email protected]<version>

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
not supported

Expected behavior:

https://developers.google.com/web/fundamentals/web-components/shadowdom#focus

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[MrAntix]

I have had a look at this and it seems to be a matter of adding the flag to $attachShadow in core\host-snapshot.ts

domApi.$attachShadow(hostElm, { mode: 'open', delegatesFocus:true });

I'd like to have a crack at it if that's ok?

Just wondering how you want the API presented, the obvious suggestion ...

@Component({
  tag: 'my-component',
  delegatesFocus: true
})
export class MyComponent { }

Also testing, I wondered how I'd check the focus gets applied appropriately?

Or if I need to check this at all as that would be the responsibility of the browser or polyfill?

I can add tests that the api passes the boolean on to the $attachShadow method

[jthoms1]

@adamdbradley thoughts?

[zoofadoofa]

This is not really an edge case, anything that is slotting in content into shareable components will need delegatesFocus
See Demo

[adamdbradley]

f45c919