Event propagation using bubbles and composed (in LWC)

In this article, we will be creating a simple chain of LWC components and show how we can listen to events from components one level (or more) below the direct child of a parent component. Based on the architecture diagram shown above, we will create 3 components — communicationParentLWC, communicationChildLWC and communicationGrandChildLWC.
(I am testing this demo in vlocity_cmt package)

The event propagation used 2 extra variables in your dispatchEvent — bubbles and composed and both are set to true. Based on the official documentation here:

Event.bubbles A Boolean value indicating whether the event bubbles up through the DOM or not. Defaults to false. Event.composed A Boolean value indicating whether the event can pass through the shadow boundary. Defaults to false.

Creating LWC components

Parent LWC

1. HTML

2. JS

Child LWC

1. HTML

2. JS

Grand Child LWC

1. HTML

2. JS

I tested the components by creating an OmniScript and adding a step with an LWC. On the preview — I can see on the button click I am able to see the message passed from GrandChild LWC and is handled in ParentLWC. This is the end of article, feel free to put up any questions below in case you are running into any issues.