Compose Components Using Slots Vs Data
When creating components that contain other components, consider the lifecycle of the component’s hierarchy using the declarative approach with slots, or the data-driven approach where a child component reacts to data changes from its parent.
A common pattern for building components declaratively looks like this.
This example has a
c-parent component that uses a
slot element. Although convenient for the consumer, you must manage the lifecycle of the content passed through the
There are several ways to manage content that’s passed into a slot.
- Use the
slotchangeevent. This is the recommended approach.
slotchangebubbles up through the DOM but doesn’t cross the shadow boundary, enabling the parent component that contains the slot to react to it.
- Use custom events to notify the parent component of changes to the child components, which enables you to make the methods on the component you are interacting with private. We no longer recommend this approach as we’re gradually migrating components to use native shadow, which enforces components to use the
slotchange event with slots, you manage the lifecycle for the
slot content between parent and child components. An example of this pattern is the
lightning-button-group base component with child
lightning-button-group component contains a
slot element with the
onslotchange event to manage the lifecycle of content you pass in.
The base component examples are for demonstration purposes only. Base component internals are subject to change. We document changes to the features and behavior of components, but don’t document changes to their internals. See the Component Reference for the public attributes and methods on a base component.
slotchange handler handles the updates to slotted elements when the content of the slot changes. In this case, the parent
lightning-button-group component determines the CSS classes on the child
lightning-button components based on the order they appear in the group—first, middle, last, or whether it’s the only button in the group.
Modify the button class using a getter.
Fire a register event so the
lightning-button-group component can register the
Notify the parent when the child component is no longer available.
Using the data-driven approach, the component gets the changes in a reactive way when data changes.
This example composes a child component using a data-driven approach.
A data-driven approach is recommended when you have a complex use case. An example of a base component that’s created using the data-driven approach is