Stencil: Expose ShadowDOM properties

[romulocintra]

Stencil version:

 @stencil/core@all

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:

Actually, in stencil component, you are able to set

@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.css',
  shadow : true / false 
})

Expected behavior:

I should able to control the ShadowDOM properties, exposing the same API as WC's to set open or close and in future DelegateFocus etc ...

@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.css',
  shadow : { mode : 'closed'  delegatesFocus : true } 

[kneyugn]

It has been a challenge trying to implement accessible components with focus events. A lot of times, the element that needs to trigger the focus is inside of the shadow dom and not the host element. Exposing delegatesFocus will be very helpful.

[romulocintra]

cc @manucorporat @adamdbradley

Another good reason FIREFOX joined to

https://github.com/whatwg/html/pull/4796

PR still open https://github.com/ionic-team/stencil/pull/1190

[adamdbradley]

Featured added in https://github.com/ionic-team/stencil/commit/ad94fd255e113d520b68ff4d06b1c938ba8f8ead