How do I set my event listener to capture an event through the shadow DOM?

Question

I have a custom element which has a number of other custom elements in its shadow DOM. I want those child elements to react to an event the parent dispatches, so I set the composed flag to true, like

const matchingEvent = new CustomEvent('match', {
      composed: true
    })
this.dispatchEvent(matchingEvent)

and in the child element I set capture to true, like

this.addEventListener('match', this.#onMatching, {
      capture: true
    })

The event isn't captured, though. Is composed the wrong flag for capturing events from outside the shadow DOM, or is there another problem with my code?

Answer 1

Events bubble UP the DOM.

So the child needs to listen at an element above where it was dispatched.

And you probably want bubbles:true also for that CustomEvent