0

I have the below example where a slot attribute is passed to the lightning-button to align with the lightning-card. Is there a documentation where I could read more about the slot property?

<template>
        <!-- Base variant: Makes a button look like a link -->
        <lightning-card title="Title">
                    <lightning-button label="Neutral" title="Non-primary action" onclick={handleClick} class="slds-float_right" slot="actions"></lightning-button>
        </lightning-card>    
</template>

1 Answer 1

1

That's in the documentation. I won't repeat all of it here, because that would be redundant, but here's the summary.

Slots are placeholders where a parent component can insert content directly into a child component. There are two types of slots, the default/unnamed slot, and named slots. In the child, you can specify where those slots are positioned:

<template>
 <slot>Default Header Content</slot>
 <table>
   <tr>
     <td><slot name="left">Empty Left Content</slot></td>
     <td><slot name="right">Empty Right Content</slot></td>
   </tr>
 </table>
</template>

Here, we define a default slot, and two named slots. Now, we can use them any way we desire:

<c-two-panel>
 <div>This will be the header content</div>
 <span slot="left">This will appear in the left hand panel</span>
</c-two-panel>

In this demo, the rendered content will appear as:

 <div>This will be the header content</div>     
 <table>
   <tr>
     <td><span>This will appear in the left hand panel</span></td>
     <td>Empty Right Content</td>
   </tr>
 </table>

Notice how we didn't specify any content for right, so it defaulted to the content provided in the child template.

One final note, default slots can appear in multiple places; if so, the content that was passed in will appear in each place.

I have included all of this in a WebComponents.dev demo for you to fork and play around with.

4
  • Thank you @sfdcfox but my question was more towards using slot in lightning-button. It seems like there is a slot action that can be used for lightning-card. I just found the documentation here: developer.salesforce.com/docs/component-library/bundle/… Nov 12, 2021 at 4:18
  • @Krishnamurthy In your code sample, slot="actions" tells the lightning-card where to place the lightning-button. The attribute is not "actually" a property of lightning-button, it is a special attribute used to determine the button's location in the card.
    – sfdcfox
    Nov 12, 2021 at 4:20
  • Yes understood. Thank you so much for the clear explanation! Nov 12, 2021 at 4:20
  • @Krishnamurthy You're welcome. Glad I was able to help.
    – sfdcfox
    Nov 12, 2021 at 4:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .