Pass HTML Markup From Parent to Child In LWC

You might have passed data from Parent Lightning web Component to Child Lightning Web Component but have you ever came across any requirement to pass HTML markup from Parent to child in Lightning Web Component? If yes, how would LWC framework allows you to pass HTML markup from parent to child Lightning Web Component?

SLOTS – Pass HTML to Child

Here comes the <slot></slot> to save you from such situation. A slot (<slot></slot>) is a placeholder for markup that a parent component passes into a component’s body. Slots are part of the Web Component specification.

Two things you should keep in mind before you start :-

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

Different Types of Slot

1. Unnamed Slots – A slot without a name attribute.
2. Named Slots – A named slot is a <slot> element with a name attribute.

Unnamed Slots

According to Salesforce Documentation, An unnamed slot is a placeholder for any markup that a parent component passes into the body of the child component. To understand more about it, lets create a Lightning Web Component with name componentWithUnnamedSlot.

Code – Pass HTML to Child from Parent in LWC

Any Lightning Web Component will be created with three files. So when you do create componentWithUnnamedSlot, You got these files beneath it:-

1. componentWithUnnamedSlot.html
2. componentWithUnnamedSlot.js
3. componentWithUnnamedSlot.js-meta.xml

componentWithUnnamedSlot.html

The html file have two div elements. One of the div element has the header and another one contains the <slot></slot> element which is a unnamed slot.

<template>
    <div class="slds-text-heading_large">
        Learning Unnamed Slot 
    </div>
    <div>
        <slot></slot>
    </div>    
</template>

componentWithUnnamedSlot.js

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

import { LightningElement } from 'lwc';

export default class ComponentWithUnnamedSlot extends LightningElement {}

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

The html file of the parent component calls the child component c-component-with-unnamed-slot. As c-component-with-unnamed-slot has unnamed slot, It gives you the flexibility to pass the HTML markup from parent Lightning web Component.

<template>
    <c-component-with-unnamed-slot>
        <div class="slds-card">
            <div class="slds-m-around_medium">
                <h1 class="slds-text-heading_small">HTML MARKUP</h1>
                <p class="slds-text-body_regular">The following examples show how you can pass markup to child Lightning Web Component from Parent Lightning Web Component</p>
            </div>
            <div>
                <h2>Basic Input Date</h2>
                <lightning-input type="date" name="input1" label="Enter a date" ></lightning-input>            
            </div>
        </div>
    </c-component-with-unnamed-slot>
</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 to Slots

Let’s add the parent Lightning Web Component we have created to Lightning Home Page using Lightning App Builder. After adding it to page, Save the page and Activate it. You will see below:-

Keep Checking out our blog for understanding named Slots and other features related to Slots here:- https://salesforcediaries.com/category/lightning-web-component/