Configuring Event Propagation In Lightning Web Components
Before diving into this topic you should be aware of different phases of DOM Events propagation which are as follows:
- Capturing phase: the event goes down to the element.
- Target phase: the event reached the target element.
- Bubbling phase: the event bubbles up from the element.
Please get yourself familiar with these phases of DOM Events by reading a beautiful post over here – https://javascript.info/bubbling-and-capturing
Lightning web component events propagate according to the same rules as DOM events. Lightning web components use only the bubbling phase. Dispatching events or adding listeners to the capture phase isn’t supported. Think of the event’s path as starting with your component and then moving to its parent, grandparent, and so on.
When you create an event, define event propagation behavior using two properties on the event, bubbles and composed.
To understand event configuration in LWC we have created three-component as c-grand-parent, c-parent, and c-child such that grandparent contains parent, parent contains a child respectively.
In this example, a custom event is fired from the c-child component upon the click of a button.
Let’s see how the event propagates with different configurations.
bubbles: false and composed: false
This is the default configuration and is recommended because it’s the least disruptive and provides the best encapsulation for your component.
For this configuration, the event bubbles up to <c-child> and only it can react to the event. Refer to the code structure below to visualize it.
<body>
<c-grand-parent>
#shadow-root
| <c-parent>
| #shadow-root
| | <div class="wrapper">
| | <c-child> <!-- Event bubbles up here -->
| | #shadow-root
| | | <h3>I'm a child component</h3>
| | | <button>click me</button>
| | </c-child>
| | </div>
| </c-parent>
</c-grand-parent>
</body>bubbles: true and composed: false
In this configuration, the event bubbles up through the DOM but doesn’t cross the shadow boundary. As a result, both c-child and div.wrapper can react to the event.
<body>
<c-grand-parent>
#shadow-root
| <c-parent>
| #shadow-root
| | <div class="wrapper"> <!-- Event bubbles up here -->
| | <c-child> <!-- Event bubbles up here -->
| | #shadow-root
| | | <h3>I'm a child component</h3>
| | | <button>click me</button>
| | </c-child>
| | </div>
| </c-parent>
</c-grand-parent>
</body>bubbles: true and composed: true
In this configuration, the event bubbles up through the DOM, crosses the shadow boundary, and continues bubbling up through the DOM to the document root.
<body> <!-- Event bubbles up here -->
<c-grand-parent> <!-- Event bubbles up here -->
#shadow-root
| <c-parent> <!-- Event bubbles up here -->
| #shadow-root
| | <div class="wrapper"> <!-- Event bubbles up here -->
| | <c-child> <!-- Event bubbles up here -->
| | #shadow-root
| | | <h3>I'm a child component</h3>
| | | <button>click me</button>
| | </c-child>
| | </div>
| </c-parent>
</c-grand-parent>
</body>bubbles: false and composed: false
Lightning web components don’t use this configuration so you skip this 🙂
Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂
Hi,
Thank you for great explanation but lwc doesn’t support the configuration when bubbles :false and composed :true.