PDI · Question #193
Which Lightning Web Component custom event property settings enable the event to bubble up the containment hierarchy and cross the Shadow DOM boundary?
The correct answer is B. bubbles: true, composed: true. To enable a Lightning Web Component custom event to both bubble up the DOM containment hierarchy and penetrate the Shadow DOM boundary, its bubbles and composed properties must both be set to true.
Question
Which Lightning Web Component custom event property settings enable the event to bubble up the containment hierarchy and cross the Shadow DOM boundary?
Options
- Abubbles: tnje, composed: false
- Bbubbles: true, composed: true
- Cbubbles: false, composed: false
- Dbubbles: false, composed: true
How the community answered
(32 responses)- B94% (30)
- C3% (1)
- D3% (1)
Why each option
To enable a Lightning Web Component custom event to both bubble up the DOM containment hierarchy and penetrate the Shadow DOM boundary, its `bubbles` and `composed` properties must both be set to `true`.
While `bubbles: true` allows the event to bubble up the regular DOM, `composed: false` prevents it from crossing the Shadow DOM boundary, meaning it will not propagate out of the shadow root where it originated.
For a custom event in a Lightning Web Component to propagate up through both the regular DOM tree (bubbling) and across shadow DOM boundaries (composed), both the `bubbles` and `composed` properties must be explicitly set to `true` when dispatching the event.
With `bubbles: false`, the event will not propagate up the DOM hierarchy at all, and `composed: false` also prevents it from crossing the Shadow DOM boundary.
While `composed: true` allows the event to cross the Shadow DOM boundary, `bubbles: false` means the event will not bubble up the DOM hierarchy once it crosses the boundary, limiting its propagation.
Concept tested: LWC custom event `bubbles` and `composed` properties
Source: https://developer.salesforce.com/docs/component-library.en-us.lwc.meta/lwc/lwc_events_creating_and_dispatching.htm
Topics
Community Discussion
No community discussion yet for this question.