Slots in LWC (Lightning Web Component)

In this post, we will see why and how we should use Slots in LWC (Lightning Web Component).

Slots in LWC are useful to make Lightning Web Component reusable and more flexible. It is also used to create a template in Lightning Web Component where we can create dynamic sections where the markup can be populated dynamically.

Usually, Slots in LWC are particularly used in Child Component where we define sections, for example, header, body, and footer. These sections are called Slots. The Slot is a placeholder for markup. Once the Slots are created in Child Component, the markup for these Slots can be passed from Parent Component. Hence, we can use one child component to show it in multiple ways to make it more reusable and dynamic. Let’s get into the implementation.

Implementation

In this implementation, we will create a Parent and Child Lightning Web Component. Child Component will have Contact details like Name, Contact Info, and Other Information. We will create a Slots for Name, Contact and Other Information.

We have to provide the name for Slots. If the name is not provided, it is called an Unnamed Slot. And any markup (without Slot attribute) that is included inside the Child Component tag in the Parent Component will be rendered in all the Unnamed Slots in Child Component. Hence, ideally, there should be only 1 Unnamed Slot if necessary.

Child Component

Take a look at the below Child Component:

contact.html

<template>
    <div class="contactCard">
        <slot name="heading"></slot> <br/>
        <p>Contact Info:<br/><slot name="contactInfo"></slot></p> <br/>
        <slot></slot> <br/>
        <slot name="componentName"></slot>
    </div>
</template>

Here, we have created 4 Slots where the markup will be sent from Parent Component:

• heading: To display the Name of Contact. We will pass markup to display Name in a unique style.
• contactInfo: It will display Contact Information. We will pass either Website, Email, or Phone for Contact.
• Unnamed Slot: Unnamed Slot. It will have the markup (without Slot) that is included inside the Child Component tag in Parent Component.
• componentName: To display the name of Child Component.

Now, if we want to display three Contacts with unique heading style, or if we want to display Contact Information which can be either Website, Phone, or Email, we need to handle this using if conditions with multiple attributes. Now, let’s check how easy it will be to do with Slots in LWC.

Parent Component

Now, take a look at the below Parent Component.

<template>
    <lightning-card title="SLOTS in LWC Implementation (contactList.html)">
        <div class="slds-p-around_xx-small">
            <div class="flex-container" style="display: flex;">
                <c-contact>
                    <h2 slot="heading" class="slds-text-heading_large">Niks Developer</h2>
                    <p slot="contactInfo">Website: https://niksdeveloper.com</p>
                    <p>This is the Slot without Name for Niks Developer</p>
                    <p slot="componentName" class="slds-align_absolute-center">
                        <strong>contact.html</strong>
                    </p>
                </c-contact>
                <c-contact>
                    <h2 slot="heading" class="slds-text-heading_medium">Cristiano Ronaldo</h2>
                    <p slot="contactInfo">Email: cronado@cr7.com</p>
                    <p>This is the Slot without Name for Cristiano Ronaldo</p>
                    <p slot="componentName" class="slds-align_absolute-center">
                        <strong>contact.html</strong>
                    </p>
                </c-contact>
                <c-contact>
                    <h2 slot="heading" class="slds-text-heading_small">Lionel Messi</h2>
                    <p slot="contactInfo">Phone: 09999999999</p>
                    <p>This is the Slot without Name for Lionel Messi</p>
                    <p slot="componentName" class="slds-align_absolute-center">
                        <strong>contact.html</strong>
                    </p>
                </c-contact>
            </div>
        </div>
    </lightning-card>
</template>

Here, we are using 3 instances of contact Child Component. To pass the markup for a particular Slot, we just need to add the slot attribute in the tag and pass the name of the attribute defined in Child Component like below:

<h2 slot="heading">Niks Developer</h2>

For each Contact, we can pass different markups for each Slot. We are passing headers with different sizes using the class attributes. In the Contact Information, we are sending different types of contact detail for each Contact. We have also added a random <p> tag like below to send some markup for Unnamed Slot. To pass the markup to Unnamed Slot, we don’t have to provide a slot attribute.

<p>This is the Slot without Name for Niks Developer</p>

Below is the CSS file to make this look beautiful:

contact.css

.contactCard{
    width: 225px;
    height: 195px;
    background-color: #d8f2f0;
    display: inline-block;
    padding: 5px;
    margin: 10px;
}

Slots in LWC

This is how our implementation of Slots in LWC looks like. We are using the same Child Component to display dynamic Contact details. All 3 cards look a little different with different types of data but it is the same component. The header has a different style and Contact Info has different types of contact details.

This is how we can implement Slots in LWC. Please Subscribe here if you don’t want to miss new implementations.

You can check more implementations using Lightning Web Components here.

Slot element also supports slotchange event. It gets fired when a direct child of a node in a Slot element changes. Check official Salesforce documentation here if you want to know more about Slots in LWC.