LWC Event Best Practices Question

I’m confused about what documentation says about event best practices.

CustomEvent.detail

To communicate data to elements in the same shadow tree, don’t add
myProperty into event.detail. The consumer of the event can use the
event.target.myProperty. To communicate data to elements that aren’t
in the same shadow tree, use event.detail.

Doesn’t these sentences contradict one another? In both instances you’re supposed to use event.detail. What is the difference they are trying to convey here?

Answer

This statement is saying that when you are trying to communicate in the same component js file, then there is no need to add event.detail as the consumer can access anything from event object like event.target.name or event.target.value.
But, if you are trying to communicate with 2 different components, parent and child or sibling components then you have to provide the event.detail with some object as {‘name’:’Mayank’,age:’25’} because the consumer will not have access to event.target properties.
Thanks

Attribution
Source : Link , Question Author : Neophyte__c , Answer Author : Mayank Agarwal

Leave a Comment