I am trying to understand a LWC recipe which explains event bubbling below I have added a parent and a child component here contact object is being passed to child component and then upon clicking the anchor tag of child component it dispatches an event where instead of passing any object it just passed the bubbles: true and in parent component handled the event with event.target.contact

now the confusing part for me is contact was never passed at the child level when dispatching the event it was just bubbles: true then where the event.target.contact came from in parent? Can anyone please help me to understand this behavior?

Parent Component named EventBubbling


    <lightning-card title="EventBubbling" icon-name="standard:logging">
        <template if:true={contacts.data}>
            <lightning-layout class="slds-m-around_medium">
                <!-- c-contact-list-item-bubbling emits a bubbling event so a single listener on a containing element works -->
                    <template for:each={contacts.data} for:item="contact">
                <lightning-layout-item class="slds-m-left_medium">
                    <template if:true={selectedContact}>
                            alt="Profile photo"
        <template if:true={contacts.error}>
            <c-error-panel errors={contacts.error}></c-error-panel>
        <c-view-source source="lwc/eventBubbling" slot="footer">
            Child-to-grandparents communication using an event that bubbles and
            is handled on a higher level element in the DOM tree. Click an item
            in the list to see the recipe in action.


import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class EventBubbling extends LightningElement {
    @track selectedContact;

    @wire(getContactList) contacts;

    handleContactSelect(event) {
        this.selectedContact = event.target.contact;

Child Component contactListItemBubbling

    <a href="#" onclick={handleSelect}>
        <lightning-layout vertical-align="center">
                <img src={contact.Picture__c} alt="Profile photo" />
            <lightning-layout-item padding="around-small">


import { LightningElement, api } from 'lwc';

export default class ContactListItemBubbling extends LightningElement {
    @api contact;

    handleSelect(event) {
        // 1. Prevent default behavior of anchor tag click which is to navigate to the href url
        // 2. Create a custom event that bubbles. Read about event best practices at http://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_best_practices
        const selectEvent = new CustomEvent('contactselect', {
            bubbles: true
        // 3. Fire the custom event

1 Answer 1


Standard DOM events hold a reference to the DOM element that triggered them in the target attribute. In your example, event.target refers to a c-contact-list-item-bubbling element. This element has a contact HTML attribute (this comes from @api contact) so you can retrieve it by calling event.target.contact.

  • Thank you so much :)
    – gs650x
    Commented Feb 14, 2020 at 13:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .