Understand Named Slots in Lightning Web Component

Before getting into named slots in Lightning Web Component, you can go through idea of using Slots and how you can pass markup to child components from parent components. Now, You might have a question about named slots. What is the key difference in named slots and unnamed slots apart from defining the name attribute in slot element? Let’s understand the named slots in Lightning Web Component by differentiating different types of slots.

Key Difference between named and unnamed slots

When name attribute is defined in slot element, it is known as named slots where as slot without a name attribute is called unnamed slots.
Let’s take an example of building an reusable Lightning web Component for creating modals. You would like to implement the functionality in such a way that developer will have ability to pass html markup into header, body and footer of the modal component. You can use named slot to make sure the markup goes at right place of the modal. You can refer modal component available in lwc-recipes.

Let’s create a Lightning Web Component with name componentWithNamedSlot which will have named slots define in its HTML markup.

componentWithNamedSlot.html

We are going to define two named slots and one unnamed slots in html file of the component. The first two slots are named slot where as the last one is unnamed slot.

<template>
    <p>User Name: <slot name="userName">Default Email</slot></p>
    <p>Email: <slot name="email">Default Email</slot></p>
    <p>Full Name: <slot>Default Full Name</slot></p>
</template>

componentWithNamedSlot.js

We are going to leave the code as it is in it without making any change.

import { LightningElement } from 'lwc';

export default class ComponentWithNamedSlot extends LightningElement {}

componentWithNamedSlot.js-meta.xml

We are not going to expose this component to any Record, Home or App page as we will be calling it inside parent component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

Its time to deploy the child component and create another component with name parentLightningWebComponent which will be the parent Lightning Web Component.

parentLightningWebComponent.html

In the parent lightning web component, we have called child lightning web component and passed markup using slot names to make sure markup goes at right place.

sanket@kumar.com.dev into the userName slot
sanket@kumar.com into the email slot
Sanket Kumar into the unnamed slot

<template>
    <div class="slds-card">
        <c-component-with-named-slot>        
            <span slot="userName">sanket@kumar.com.dev</span>
            <span slot="email">sanket@kumar.com.dev</span>
            <span>Sanket Kumar</span>
        </c-component-with-named-slot>
    </div>    
</template>

parentLightningWebComponent.js

import { LightningElement } from 'lwc';

export default class ParentLightningWebComponent extends LightningElement {}

parentLightningWebComponent.js-meta.xml

The parent Lightning Web Component has been exposed to Lightning Home Page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

Demo – Pass Markup using Named Slots

You noticed that markup passed using slot name from parent to child lightning web component gets passed according to their name. Markup passed without any slot name goes to unnamed slots.

Points to remember

You can’t pass an Aura component into a slot.
If a component has more than one unnamed slot, the markup passed into the body of the component is inserted into all the unnamed slots. This UI pattern is unusual. A component usually has zero or one unnamed slot.