8

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.

4
  • 3
    I agree that the behavior seems contrary to the documentation. I would have expected the top-level div to not handle the event, but it does. I'm going to ask around, should have an update in the next day or so.
    – sfdcfox
    May 20, 2020 at 6:12
  • @sfdcfox thanks for your update May 20, 2020 at 6:50
  • @RanjithUK It looks like a bug in the event dispatching. Here is the git issue if you are interested to follow: github.com/salesforce/lwc/issues/1882
    – pmdartus
    May 20, 2020 at 15:07
  • @pmdartus thanks, I will follow that. May 21, 2020 at 2:25

2 Answers 2

0

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

1
  • Thanks for your update, but in both scenarios I'm getting same result, this is my playground link click here Jun 10, 2020 at 6:28
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.