Estoy escribiendo un elemento personalizado de Javascript y quiero que un evento burbujee más allá de su límite shadowDOM. Capturar el evento dentro de shadowDOM no es un problema, pero ¿cómo puedo escuchar el evento en lightDOM?

html

 <div class="tasks"> <m-task name="Abc" number=123></m-task> </div>

javascript

 customElements.define('m-task', class mTask extends HTMLElement { constructor() { super() this.attachShadow({ mode: 'open' }) // ---> LISTENING FOR EVENT <--- this.addEventListener('connected', e => { console.log(e.detail) }) // ---> LISTENING FOR EVENT <--- this.addEventListener('disconnected', e => { console.log(e.detail) }) } connectedCallback() { console.log('connected', this) this.dispatchEvent(new CustomEvent('connected', { bubbles: true, composed: true, detail: { type: 'connected', value: 1234 } })) } disconnectedCallback() { console.log('disconnected', this) this.dispatchEvent(new CustomEvent('disconnected', { bubbles: true, composed: true, detail: { type: 'disconnected', value: -99 } })) } }) // ---> LISTENING FOR EVENT <--- // THIS IS NOT WORKING document.querySelector('.tasks').addEventListener('connected', e => { console.log('listening in the light') console.log(e.detail) })

consola

 connected <m-task name="Abc" number="123"> Object { type: "connected", value: 1234 } disconnected <m-task name="Abc" number="123"> Object { type: "disconnected", value: -99 }

editar

esperando 1 ms da el resultado esperado

 setTimeout(() => { this.dispatchEvent(new CustomEvent('connected', { bubbles: true, composed: true, detail: { type: 'connected', value: 1234 } })) }, 1);