Which Lightning Web Component custom event property settings enable the event to bubble up the containment hierarchy and cross the Shadow DOM boundary?

Which Lightning Web Component custom event property settings enable the event to bubble up the containment hierarchy and cross the Shadow DOM boundary?
A . bubbles: true, composed: true
B . bubbles: true, composed: false
C . bubbles: false, composed: false
D . bubbles: false, composed: true

View Answer

Answer: A

Explanation:

To enable a custom event in a Lightning Web Component (LWC) to bubble up the containment hierarchy and cross the Shadow DOM boundary, the event must be dispatched with the properties:

bubbles: true

composed: true

bubbles Property:

When set to true, the event bubbles up through the DOM hierarchy, allowing parent components to listen for the event.

"The bubbles option indicates whether the event bubbles up through the DOM or not."

― Lightning Web Components Developer Guide: Event Propagation composed Property:

When set to true, the event can pass through the Shadow DOM boundary, allowing components outside the Shadow DOM to receive the event.

"The composed option controls whether the event can propagate across the boundary between the shadow DOM and the regular DOM."

― Lightning Web Components Developer Guide: Event Composition

Example:

// ChildComponent.js

const event = new CustomEvent(‘myevent’, {

bubbles: true,

composed: true,

detail: { /* event data */ }

});

this.dispatchEvent(event);

Why Other Options Are Incorrect:

Option B: bubbles: true, composed: false

The event will bubble up within the Shadow DOM but will not cross the Shadow DOM boundary. Option C: bubbles: false, composed: false

The event will neither bubble nor cross the Shadow DOM boundary, limiting its propagation. Option D: bubbles: false, composed: true

The event will not bubble up the containment hierarchy but can cross the Shadow DOM boundary,

which is insufficient for the requirement.

Conclusion:

Setting both bubbles and composed to true ensures the event bubbles up through the component hierarchy and crosses the Shadow DOM boundary.