Child to grandparent communication in LWC

Question

I am providing below the snippets of child, parent and grandparent component, where the child is contained inside the parent component, and the parent is contained inside the grandparent component.

Child

<template>
    <a href="#" onclick={handleClick}>
        <lightning-layout vertical-align="center">
            This is some text
        </lightning-layout>
    </a>
</template>

export default class Child extends LightningElement {
    handleClick(event) {
        event.preventDefault();
        this.dispatchEvent(new CustomEvent('notification'), { bubbles: true, composed: true });
    }
}

Parent:

<template>
    <lightning-card title="EventWithData" icon-name="standard:logging">
        <c-child onnotification={handleNotification}></c-child>
    </lightning-card>
</template>

export default class Parent extends LightningElement {
    handleNotification(event) {
        console.log('This is parent');
    }
}

Grandparent:

<template>
    <c-parent onnotification={handleNotification}></c-parent>
</template>

export default class GrandParent extends LightningElement {
    handleNotification(event) {
        console.log('This is grandParent');
    }
}

I am getting the message from the parent component, signifying that the parent component can listen to the child event, but the grandparent can't listen to the event. Is there something which I am missing?

Please note that I have set the bubbles and composed property of the event as true.

Answer 1

I just spent a while scratching my head on this too.

This will compile, but the event won't be caught by any components other than the immediate parent:

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

This, however, will work:

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

Note the moved ) - in the first example the CustomEvent constructor is never given the bubbles and composed options, so they fallback to their default values of false

Answer 2

It works with bubble & composed set to true.

    // Event dispatch on Grand Child

    //Method to show selected tab upon user select
    selectTab(event) {
        event.preventDefault();
        this.dispatchEvent(new CustomEvent('selecttab', {bubbles: true, composed: true, detail :{ selectedIndex: this.tabIdVal}}));
    }

    // Event listener on Grand Parent

    constructor() {
        super();
        this.addEventListener('movetab', this.moveTab.bind(this));
        this.addEventListener('selecttab', this.selectTab.bind(this));      
    }

Answer 3

You can only listen to the events fired by the immediate child. That is child's events can be listened by just parent and not a grandparent.

Check an excerpt from SF Docs:

We don’t recommend bubbling events outside of your own template, but it is possible. 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.

As your parent contains child, it can listen to the child's event. Your grandparent doesn't and hence cant listen to child's event.

Answer 4

I am able to this with 'bubble' and 'composed' to true with inline event handlers too.

this.dispatchEvent(new CustomEvent('alert', { bubbles: true,
                                              composed: true,
                                              detail: element.value }));

Here is the code snippet.

Answer 5

In hierarchy relation of component set the event attributes bubbles = true, and composed = true , this event can propagate up to the DOM root.

Answer 6

I have edited my response to be more helpful. Upon reviewing your code, I noticed a mistake in the event creation.

Your code: this.dispatchEvent(new CustomEvent('notification'), { bubbles: true, composed: true });

Correct code: this.dispatchEvent(new CustomEvent('notification', { bubbles: true, composed: true }));

The mistake was that the options object (bubbles and composed) was mistakenly placed outside the parentheses of the CustomEvent. By moving the options inside the parentheses, the event will be created correctly with the desired behavior. It's important to note that the default values for bubbles and composed are false, which explains the unexpected behavior you experienced.

for more detail, check this implementation:

https://vijayasankarn.wordpress.com/2022/01/07/salesforce-lwc-multi-level-component-communication-using-events/

Derek F, thanks for your feedback