Pass HTML to a Child Component in LWC

You, in your Salesforce development experience, might have placed a child LWC Component inside a parent component and sent data dynamically. But have you ever come across a use case where passing dynamic HTML markups make sense. In this article we will walk through the steps to pass HTML to a Child Component in LWC.

Why do we need to Pass HTML to a Child Component in LWC ?

When working on a project which requires customization using LWC, we generally try to create generic components that can be reused in multiple places.

This approach fosters code-reuse, avoids code delicacy and is easy to maintain. While building generic LWC Components there can be scenarios where the component should provide a specific functionality but the content should be passed dynamically.

One such use case is a Modal component, were we want the all the functionality of a Modal but the body content should be passed dynamically from a parent component.

To implement this, we will be using slots in LWC. A slot tag acts as a placeholder where a parent component can pass an HTML markup.

Note: To know more about slots read the Salesforce documentation

Let’s get started with the code snipper which is required to implement this functionality.

First we will start by creating a generic LWC component which will have placeholders, using slot tag. Lets create the LWC from our vscode.

First Create generic LWC Component with slot

HTML Code

<template>
    <div style="background:white;padding:10px">
        <!--Named Slot-->
        <slot name="header"></slot>

        <!--Unnamed Slot-->
        <slot></slot>

        <!--Named Slot-->
        <slot name="footer"></slot>
    </div>
</template>

Explanation

As you can see from the HTML code snippet, we have create three sections using the slot tag. There are two named slots and one unnamed slot.

JS Code

import { LightningElement } from 'lwc';

export default class SlotsChild extends LightningElement {
    
}

Explanation

For our this example we will keep things simple and leave the JS code blank.

Second Create a Parent LWC Component

Now that we have created an LWC Component to act as a placeholder for the HTML markups, we will create a parent LWC component. This parent component will hold the generic component and pass the necessary html markups, required to build the complete UI.

HTML Code

<template>
    <c-slots-child>
        
        <!--This goes into the header slot-->
        <div slot="header">
            <div style="text-align: center;background: white;padding: 10px;font-size: large;font-weight: 600;">
                Welcome to SFDCRocks247
            </div>
        </div>

        <!--This goes into unnamed slot-->
        <div>
            <lightning-input type="text" label="First Name"></lightning-input>
            <lightning-input type="text" label="Last Name"></lightning-input>
            <lightning-input type="number" label="Phone"></lightning-input>
        </div>

        <!--This goes into the footer slot-->
        <div slot="footer">
            <button class="slds-button slds-button_brand">Submit</button>
        </div>
    </c-slots-child>
</template>

Explanation

JS Code

import { LightningElement } from 'lwc';

export default class WorkingWithSlotsDemo extends LightningElement {
    
}

Explanation

Meta.xml Code

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

Explanation

Understanding Slot in LWC

A component can have zero or more slot.

Unnamed Slots

An unnamed slot is a slot element without the name attribute. When a parent component passes an HTML markup to the child component with unnamed slot, the slot tag is replaced completely with the HTML markup.

If a component has more than one unnamed slots, all the unnamed slots are replaced by the passes HTML markup. So its best advised to have only one or zero unnamed slots, unless its a must required.

Named Slots

Slots which have a name attribute is called a named slot. It is particularly useful when you want to create a unique slot for a specific purpose and want to target specific section for the UI for specific requirement.

Like a header section, footer or body, each one of these sections have a specific need and we can pass an HTML markup specifically targeting these sections.

In the screenshot above, you can see that though the order of footer and header in the parent component is reversed. The HTML markup exactly knows where to appear in the UI, thanks to the named slots.

Note: You can’t pass an Aura component into a slot. If you nest a Lightning web component in an Aura component, you also can’t pass it into a slot.

Demo

Conclusion

This article covered the basic on how to pass HTML to a Child Component in LWC using named and unnamed slots. You can now be creative to build more complex UI, in your project, that will encourages code reusability and maintenance in the future.

Please help spread the word about this article by sharing it with your colleagues who could benefit from it. Also, feel free to utilize the code shared in this article for your own projects. Sharing is caring!

You can read our upcoming module on how to create a generic Modal LWC Component which can be used throughout any project. You can dynamically add you html code in footer, header and the body section.

Do Signup to our Newsletter to receive notification of our latest posts.

The generic modal component handles the heavy lifting logic of opening and closing the popup, taking care of the aesthetics & CSS part of the Modal. All you need to do is just pass the right HTML markup you want to show in each section.