@api) to send data downward, custom events to notify parents upward, Lightning Message Service (LMS) for distant components, and Lightning Data Service (LDS) for automated database sync.
Building rich, interactive user interfaces in Salesforce rarely involves a single standalone component. Most enterprise applications rely on modular architectures where multiple components collaborate to display and modify data. Mastering the various communication channels available in LWC ensures your applications remain performant, modular, and maintainable.
1. Parent-to-Child Communication
When a parent container needs to pass state or configuration data down to a nested child component, developers use public properties annotated with the @api decorator.
- Public Properties: The child component exposes variables using
@api, allowing the parent to bind values directly in its HTML template. - Naming Convention: CamelCase properties in JavaScript (e.g.,
recordId) map to kebab-case attributes in HTML templates (e.g.,record-id).
2. Child-to-Parent Communication
Because data flows strictly downward in LWC, child components cannot modify parent properties directly. Instead, they use an event-driven approach:
- Custom Events: Child components package data into a
CustomEventobject and invokethis.dispatchEvent(). - Event Handling: Parent components listen declaratively using lowercase event handlers (e.g.,
onitemselect={handler}) and extract payload data fromevent.detail.
3. Cross-Component Communication via Lightning Message Service (LMS)
When components do not share a direct parent-child relationship—such as components placed in separate regions of a Lightning Record Page or spanning across Aura and LWC boundaries—custom events are insufficient. Lightning Message Service (LMS) implements a robust publish-subscribe pattern across the entire Salesforce platform.
- Parent to Child: Use public
@apiproperties. - Child to Parent: Use
CustomEventanddispatchEvent. - Unrelated / Cross-Context: Use Lightning Message Service (LMS).
- Database Operations: Use Lightning Data Service (LDS) for optimized record caching and real-time sync.
4. Data Management via Lightning Data Service (LDS)
Rather than writing custom Apex controllers for basic database tasks, Lightning Data Service provides declarative components (<lightning-record-form>) and wire adapters (getRecord) that handle retrieval, client-side caching, and real-time record synchronization automatically across all active components on a page.
5. Integrating External Services
LWC components can also extend beyond internal CRM boundaries by communicating with external APIs and microservices. By combining secure Named Credentials on the server with JavaScript fetch or server-side Apex HTTP callouts, developers can pull real-time data from third-party systems directly into the Salesforce UI.
6. Common Traps & Best Practices
Attempting to query or modify parent elements directly from a child component using
document.querySelector violates Shadow DOM encapsulation and breaks component reusability. Always rely on events for upward communication and public methods or properties for downward data flow.
@api for downward flow, CustomEvent for upward triggers, LMS for decoupled pub-sub messaging, and LDS for cached CRM data access.
- Keep Component Hierarchies Shallow: Avoid deep multi-layer event bubbling by leveraging LMS when passing data across distant components.
- Clean Up Subscriptions: Always unsubscribe from Lightning Message Channels in
disconnectedCallback()to prevent memory leaks. - Validate Payloads: Ensure event data payloads and wire adapters handle null or error states gracefully.
Summary
Component communication is the backbone of robust Salesforce Lightning Web Component development. By mastering parent-to-child property binding, child-to-parent event dispatching, Lightning Message Service pub-sub patterns, and Lightning Data Service caching, developers can build scalable, high-performing, and maintainable enterprise applications.