Event propagation with bubble true in LWC

Question

I'm trying learn event propagation in LWC. As per the documentation it says {bubble: true, composed: false} means the event does not cross the shadow boundary, but it bubbles up the shadow boundary. I don't know where the shadow boundary ends?

This is my playground link and following my LWC related code:

parent.html

<template>
   <div onnotify={handleNotifyOutter}>
       <c-child onnotify={handleNotifyInner}></c-child>
   </div>
</template>

parent.js

export default class App extends LightningElement {
    handleNotifyOutter(event) {
        console.log('handleNotifyOutter in parent');
    }

    handleNotifyInner(event) {
        console.log('handleNotifyInner in parent');
    }
}

child.html

<template>
    <div onnotify={handleNotifyOutter}>
       <c-grand-child onnotify={handleNotifyInner}></c-grand-child>
   </div>
</template>

child.js

export default class Child extends LightningElement {
    handleNotifyOutter(event) {
        console.log('handleNotifyOutter in child');
    }

    handleNotifyInner(event) {
        console.log('handleNotifyInner in child');
    }
}

grandChild.html

<template>
    <div onnotify={handleOnNotifyOutter}>
        <button onclick={handleOnClick}> click here </button>
    </div>
</template>

grnadChild.js

export default class GrandChild extends LightningElement {
    handleNotifyOutter(event) {
        console.log('handleNotifyOutter in grand child');
    }

    handleOnClick(event) {
        console.log('handle click')
        this.dispatchEvent(new CustomEvent('notify', { bubbles: true }));
    }
}

Output for the console.log statements:

handle click
handleNotifyInner in child
handleNotifyOutter in child
handleNotifyOutter in parent

I don't know what is happening. Can anyone explain? It will helpful for me to learn.

Answer 1

As was mentioned in one of the comments, this is a longstanding LWC bug that will be fixed in the near future. The changes have already been approved and the only remaining aspect is the release timing. Please make sure not to rely on this behavior to avoid having to make changes once the fix lands.

• https://github.com/salesforce/lwc/issues/2121
• https://github.com/salesforce/lwc/pull/2226

Answer 2

Please refer to the link: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_propagation

1. To bubble an event inside the component’s template, dispatch the event on an element in the template. The event bubbles up to the element’s ancestors inside the template only. When the event reaches the shadow boundary, it stops.

    this.template.querySelector('div')
        .dispatchEvent(
            new CustomEvent('notify', { bubbles: true })
    );

2. To bubble an event to the template that contains your component, dispatch the event on the host element. The event is visible only in the template that contains your component.

    this.dispatchEvent(
        new CustomEvent('notify', { bubbles: true })
    );

The code that you have written satisfies point 2. In order to only dispatch the event inside your component, please dispatch the event with an element.

Thanks