This is how you do it in LWC. You can pass components into another components using <slot> tag.

This is how you do it in LWC. You can pass components into another components using <slot> tag.

Unnamed Slots

This example has an unnamed slot. An unnamed slot is a placeholder for any markup that a parent component passes into the body of c-slot-demo.

<!-- slotDemo.html -->
<template>
    <h1>Add content to slot</h1>
    <div>
        <slot></slot>
    </div>
</template>

Here’s the markup for a parent component that uses c-slot-demo.

<!-- slotWrapper.html -->
<template>
    <c-slot-demo>
        <p>content from parent</p>
    </c-slot-demo>
</template>

When c-slot-demo is rendered, the unnamed slot is replaced with the markup passed into the body of c-slot-demo. Here’s the rendered output of c-slot-wrapper.

<h1>Add content to slot</h1>
<div>
    <slot>
        <p>content from parent</p>
    </slot>
</div>

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.

Named Slots

This example component has two named slots and one unnamed slot.

<!-- namedSlots.html -->
<template>
    <p>First Name: <slot name="firstName">Default first name</slot></p>
    <p>Last Name: <slot name="lastName">Default last name</slot></p>
    <p>Description: <slot>Default description</slot></p>
</template>

Here’s the markup for a parent component that uses c-named-slots.

<!-- slotsWrapper.html -->
<template>
    <c-named-slots>
        <span slot="firstName">Willy</span>
        <span slot="lastName">Wonka</span>
        <span>Chocolatier</span>
    </c-named-slots>
</template>

The c-slots-wrapper component passes:

• Willy into the firstName slot
• Wonka into the lastName slot
• Chocolatier into the unnamed slot

Here’s the rendered output.

<c-named-slots>
    <p>
        First Name:
        <slot name="firstName"><span slot="firstName">Willy</span></slot>
    </p>
    <p>
        Last Name:
        <slot name="lastName"><span slot="lastName">Wonka</span></slot>
    </p>
    <p>
        Description:
        <slot><span>Chocolatier</span></slot>
    </p>
</c-named-slots>