Which two characteristics are true for Lightning Web Component custom events? Choose 2 answers

Which two characteristics are true for Lightning Web Component custom events? Choose 2 answers
A . Data may be passed in the payload of a custom event using a property called detail.
B . By default a custom event only propagates to its immediate container and to its immediate child component.
C . Data may be passed in the payload of a custom event using @wire decorated properties.
D . By default a custom event only propagates to its immediate container.

View Answer

Answer: A, D

Explanation:

In Lightning Web Components (LWC), custom events are used for communication between components.

The two characteristics that are true for LWC custom events are:

Option A: Data may be passed in the payload of a custom event using a property called detail.

When dispatching a custom event in LWC, you can pass data using the detail property of the event. This allows the parent component to access any data emitted by the child component.

// Child component JavaScript

const myEvent = new CustomEvent(‘myevent’, {

detail: { data: ‘Some data’ }

});

this.dispatchEvent(myEvent);

Reference: "The CustomEvent interface represents events initialized by an application for any purpose. You can pass data to the event handler using the detail property."

― Lightning Web Components Developer Guide: Communicate with Events

Option D: By default, a custom event only propagates to its immediate container.

In LWC, custom events do not bubble by default. They are dispatched to the immediate parent component unless the event is configured to bubble.

// To enable bubbling and composition

const myEvent = new CustomEvent(‘myevent’, {

bubbles: true,

composed: true

});

this.dispatchEvent(myEvent);

Reference: "Custom events don’t bubble or compose by default. To make an event bubble up through the DOM tree, set the bubbles parameter to true when creating the event."

― Lightning Web Components Developer Guide: Event Propagation Incorrect Options:

Option B: Incorrect because by default, custom events do not propagate to child components or beyond the immediate container without setting bubbles and composed to true.

Option C: Incorrect because @wire is used for data binding and cannot be used to pass data in the payload of a custom event.