Child-to-Parent Communication with CustomEvent

// contactListItem.js
handleSelect() {
    const selectEvent = new CustomEvent('select', {
        detail: this.contact.Id,
    });
    this.dispatchEvent(selectEvent);
}

The event's detail property carries whatever data the parent needs — here, the ID of the selected contact.

<!-- parent's template -->
<c-contact-list-item onselect={handleContactSelect}></c-contact-list-item>

// parent's JS
handleContactSelect(event) {
    const selectedId = event.detail;
    // ... do something with selectedId
}

The parent listens using on followed by the event name, in the same onclick-style pattern from Module 3 — because CustomEvent genuinely IS built on the same native Event foundation.

// Event name must be lowercase, no camelCase:
new CustomEvent('itemselected', { detail: this.itemId }); // correct
new CustomEvent('itemSelected', { detail: this.itemId }); // AVOID — will not bind reliably as onitemSelected

Custom event names must be entirely lowercase — LWC does not translate camelCase event names the way it translates attribute names. This is a genuinely common real bug: a developer expects onitemSelected to work, and it silently doesn't.

This is the standard mechanism for any child that needs to tell its parent something happened — a row was clicked, a value changed, an action completed. It's also the exact foundation the module's Project lesson builds a real interaction on.