CustomEvent blocked/lost?

[tamis-laan]

First custom component:

render() {
    return html`
      <div @click=${_=>{
            this.dispatchEvent(new CustomEvent('my-event',{bubbles:true}))
        }}>
           <slot></slot>
      </div>
    `
}

Second custom component:

render() {
    return html`
        <first-element @my-event=${_=>console.log('event triggered on second component')}>
                HELLO WORLD
        </first-element>
    `
}

Third custom component:

render() {
    return html`
        <second-element @my-event=${_=>console.log('event triggered on third component')}>      
        </second-element>
    `
}

When I click HELLO WORLD the second element my-event listener is triggered and prints to the console. The third custom component event listener is not triggered.

I would imagine the event would keep bubbling up to the third component?

BTW the click event is propagated all the way to the third component.

[tamis-laan]

Ah not a bug, apparently you need to set the composed property to true new CustomEvent('my-event',{bubbles:true,composed:true})