LWC Event Handling: Parent-Child, Sibling, and Cross-DOM Communication

// CHILD-TO-PARENT: CustomEvent
// child.js
handleSelect() {
  const event = new CustomEvent('itemselected', {
    detail: { recordId: this.recordId, name: this.name }
    // bubbles: true, composed: true  ← only if crossing shadow DOM
  });
  this.dispatchEvent(event);
}

// parent.html
// <c-child onitemselected={handleItemSelected}></c-child>
// parent.js
handleItemSelected(event) {
  const { recordId, name } = event.detail;
  // Use the data
}

// PARENT-TO-CHILD: @api properties + methods
// child.js
export default class Child extends LightningElement {
  @api recordId;  // Property — set from parent template

  @api            // Method — called from parent JS
  refresh() {
    // Re-fetch data
  }
}
// parent.js
this.template.querySelector('c-child').refresh();

// SIBLING: Lightning Message Service
// messageChannel/Record_Selected.messageChannel-meta.xml
import { publish, subscribe, MessageContext } from 'lightning/messageService';
import RECORD_SELECTED from '@salesforce/messageChannel/Record_Selected__c';

// Publisher
@wire(MessageContext) messageContext;
handleClick() {
  publish(this.messageContext, RECORD_SELECTED, {
    recordId: this.selectedId
  });
}

// Subscriber (different component)
@wire(MessageContext) messageContext;
connectedCallback() {
  this.subscription = subscribe(
    this.messageContext, RECORD_SELECTED,
    (message) => { this.selectedId = message.recordId; }
  );
}