eventBubbling.html

<template>
    <lightning-card title="EventBubbling" icon-name="standard:logging">
        <template lwc:if={contacts.data}>
            <lightning-layout class="slds-var-m-around_medium">
                <!-- c-contact-list-item-bubbling emits a bubbling event so a single listener on a containing element works -->
                <lightning-layout-item
                    class="wide"
                    oncontactselect={handleContactSelect}
                >
                    <template for:each={contacts.data} for:item="contact">
                        <fieldset
                            key={contact.Id}
                            class="slds-var-p-horizontal_x-small"
                        >
                            <legend>c-contact-list-item-bubbling</legend>
                            <c-contact-list-item-bubbling
                                class="slds-show slds-is-relative"
                                contact={contact}
                            ></c-contact-list-item-bubbling>
                        </fieldset>
                    </template>
                </lightning-layout-item>
                <lightning-layout-item class="slds-var-m-left_medium">
                    <template lwc:if={selectedContact}>
                        <img
                            src={selectedContact.Picture__c}
                            alt="Profile photo"
                        />
                        <p>{selectedContact.Name}</p>
                        <p>{selectedContact.Title}</p>
                        <p>
                            <lightning-formatted-phone
                                value={selectedContact.Phone}
                            ></lightning-formatted-phone>
                        </p>
                        <p>
                            <lightning-formatted-email
                                value={selectedContact.Email}
                            ></lightning-formatted-email>
                        </p>
                    </template>
                </lightning-layout-item>
            </lightning-layout>
        </template>
        <template lwc:elseif={contacts.error}>
            <c-error-panel errors={contacts.error}></c-error-panel>
        </template>
        <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.
        </c-view-source>
    </lightning-card>
</template>