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.

Using the Default Slot

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.

1<!-- lightning-accordion -->
2<template>
3    <div part="accordion">
4        <slot></slot>
5    </div>
6</template>

Base components’ internal markup is for demonstrative purposes only. The markup is an internal implementation that can change anytime.

Note

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

1<!-- c-custom-component -->
2<lightning-accordion>
3    <lightning-accordion-section name="A" label="Section A">
4        <!-- More content here -->
5    </lightning-accordion-section>
6    <lightning-accordion-section name="B" label="Section B">
7        <!-- More content here -->
8    </lightning-accordion-section>
9</lightning-accordion>

Using A Named Slot

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.

1<!-- c-custom-component -->
2<lightning-card title="Base Component Example" icon-name="standard:account">
3    <div class="slds-var-m-around_medium">
4        <p>Hello, {greeting}!</p>
5        <lightning-input
6            label="Name"
7            value={greeting}
8            onchange={handleChange}
9        ></lightning-input>
10    </div>
11    
12    <div slot="footer">
13        Content for the footer slot here
14    </div>
15</lightning-card>

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.

Many base components use slots to facilitate composition of visual elements. See Base Component Composition.

Note

See Also

Release Preview

This release is in preview. Features described here don't become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can't guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.