Add shadowRoot to listenOptions target

[runarberg]

Stencil version:

 @stencil/core@2.5.1

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:

When I’m listening for the slotchange event I often like to delegate it to the shadow root, especially if I have a dynamic number of slots (see example pattern in this blog post). In a nutshell you achieve this with this pattern:

@Component({ tag: "my-component", shadow: true })
export class MyComponent {
  @Element() el: HTMLElement;

  componentWillLoad() {
    this.el.shadowRoot.addEventListener("slotchange", () => {/* ... */});
  }
}

Expected behavior:

The slotchange event isn’t composed by default (i.e. won’t traverse the shadow DOM) so I can’t put it on the host element with the @Listen decorator. However slotchange does bubble to the top of the shadow DOM by default. It would be nice if we could take advantage of that by simply specifing the shadow root as a target in the @Listen decorator. This gives us a lot nicer pattern:

@Component({ tag: "my-component", shadow: true })
export class MyComponent {
  @Listen('slotchange', { target: 'shadowRoot' })
  handleSlotChange(event: Event): void {
    /* ... */
  }
}

Note that this would be especially useful for the slotchange event, but can be useful for any non-composed events.

Steps to reproduce:

Related code:

(see above)

Other information:

[splitinfinities]

This is interesting! There's already a "delegatesFocus" concept, maybe we can have some kind of a "delegatesEvents" feature too.

Tagged as a feature request, hopefully more folks can add to the signal.