Component Communication

Lightning Web ComponentsComponent CommunicationDesign how Lightning Web Components talk to each other: @api properties and methods, CustomEvents and shadow DOM propagation, slots, Lightning Message Service, state managers with @lwc/state, Flow integration and container/presentational architecture, ending with a full master-detail example.Intermediate · about 85 minutesWhat you will learn

Pass data down with @api properties and invoke child behaviour with @api methods

Dispatch and handle CustomEvents, choosing bubbles and composed deliberately and understanding retargeting across shadow boundaries

Compose components with default and named slots and react to slotchange

Create a Lightning Message Channel and publish/subscribe from LWC, Aura and Visualforce, including APPLICATION_SCOPE

Share reactive state across a component tree with @lwc/state state managers, or a shared module where appropriate

Integrate a component with Screen Flows using FlowAttributeChangeEvent, FlowNavigationNextEvent and validate()

Structure features as container and presentational components

Contents

Communication patterns at a glance

Parent to child: @api properties

Child to parent: CustomEvent

Event propagation: bubbles, composed and shadow boundaries

Slots: composition through markup

Lightning Message Service

Sibling communication patterns

State management

Communicating with Flows

Container and presentational components

Worked example: master-detail with a filter panel

Best practices

Common pitfalls

Hands-on exercises

Key takeaways