Pass Markup to a Base Component Slot

Passing a base component to a slot on another base component is a common pattern to compose visual elements. Alternatively, some base components use an attribute to enable developers to pass in configuration information and data. Understanding the differences can be helpful as you work with base components or build your own custom components.

Many base components contain an unnamed slot, which acts as a placeholder for any markup you pass in to the base component. The unnamed slot is also known as the default slot. For slot information on a base component, see the Specification tab for a base component in the Component Reference.

Creating a base component with an unnamed slot enables you to use a base component that composes other base components. For example, the lightning-accordion base component contains a <slot></slot> tag that enables you to pass in the lightning-accordion-section component within the slot of lightning-accordion.

To use lightning-accordion, you can easily nest lightning-accordion-section within lightning-accordion to display content within the accordion.

lightning-accordion-section has an actions named slot that accepts an actionable component like lightning-button or lightning-button-menu. To manage the content that's passed into the slot, lightning-accordion-section uses the slotchange event or a custom event to notify the parent component of changes to the child components.

For more information on how base components manage slot content, see Compose Components Using Slots Vs Data.

Another base component that uses both default and named slots include, lightning-card, which contains a default slot and three named slots.

You can pass markup and other base components to the slots.

Using slots results in maintainable code that's intuitive and easy to understand. For most cases, using slots would be recommended over using an attribute for passing in configuration information or data.

See Also

• Pass Configuration or Data to a Base Component
• Pass Markup into Slots
• Slots vs Data