Slot In LWC

ByPastek Editor Blogs

Summary

Add a slot to a component’s HTML file so a parent component can pass markup into the component. A component can have zero or more slots.

To use slots in LWC, the child component defines one or more slots using the HTML <slot> element. The parent component can then pass content to the child component by placing it within the <slot> element in the parent’s markup.

A component can have zero or more slots. A slot is a placeholder for markup that a parent component passes into a component’s body. Hence, we can use one child component to show it in multiple ways to make it more reusable and dynamic.

We have two type of Slot:

  1. Unnamed slots
  2. Named slots

Unnamed slots

          An unnamed slot is a placeholder for any markup that a parent component passes into the body.

use this childComponent.html code. This template markup is having the <slot> tag which will be used to pass the content from the parent component.

Childcomponent.html

<template>

     <lightning-card>

      <d6> Slot Base </d6>

      <h1>Add content to slot</h1>

      <slot>

      </slot>

     </lightning-card>

 </template>

ParentComponent.html

<template>

   <lightning-card title=”Unnamed slots”>

      <div class=”slds-p-around_small” >

        <h6>  Slot Wrapper </h6>

         <c-child-Component>

            <p>content from parent</p>

         </c-child-Component>

      </div>

   </lightning-card>

 </template>

Here’s the rendered output of Unnamed Slots

Output of Parent Component:

Named Slots

We have two different components of markup that we wish to send the child component from the parent, we cannot achieve that using unnamed slots Component.

The child component is defining the slots with the name firstname and lastName respectively.

Childcomponent.html

<template>

    <lightning-card>

        <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>

    </lightning-card>

</template>

childComponent.css

.contactCard{

    width: 225px;

    height: 195px;

    background-color: rgb(233, 237, 237);

    display: inline-block;

    padding: 5px;

    margin: 10px;

}

 parentComponent.html

<template>

    <lightning-card title=”Named slots”>

        <div class=”slds-p-around_X-small” >

            <div class=”flex-container” style=”display: flex;”>

        <c-child-Component>

            <h2 slot=”heading” class=”slds-text-heading_medium”>John Williams</h2>

            <p slot=”contactInfo”>Email: JohnWilliams@jw.com</p>

            <p>This is the Slot without Name for John Williams</p>

            <p slot=”componentName” class=”slds-align_absolute-center”>

                <strong>JohnWilliams</strong>

            </p>

        </c-child-Component>

        <c-child-Component>

        <h2 slot=”heading” class=”slds-text-heading_medium”>Orlando Bloom</h2>

                    <p slot=”contactInfo”>Email : OrlandoBloom@ob.com</p>

                    <p>This is the Slot without Name for Orlando Bloom</p>

                    <p slot=”componentName” class=”slds-align_absolute-center”>

                        <strong>OrlandoBloom</strong>

                        </p>

        </c-child-Component>

         </div>

       </div>

</lightning-card>

</template>

The Slot has been Come with now you can able to see the output as Slots.

Output of Parent Component: