Named slots in LWC components not working

Question

New to sf development. Trying to understand how slots work. I did the basic hello world component tutorial and that works fine, but wanted to add some named slots to the component to see if I could drag other components in, but not seeing the slots show up in experience builder.

helloWorld.html

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
        </div>
        <div>
            <h2>Custom Slot</h2>
            <div style="border: 1px solid black">
                <slot></slot>
            </div>
            <div style="border: 1px solid black">
                <slot name="slot1"></slot>
            </div>
            <div style="border: 1px solid black">
                <slot name="slot2"></slot>
            </div>
            <div style="border: 1px solid black">
                <slot name="slot3"></slot>
            </div>
            <div style="border: 1px solid black">
                <slot name="slot4"></slot>
            </div>
        </div>
    </lightning-card>
</template>

helloWorld.js

import { LightningElement } from 'lwc';

/**
 * @slot default
 * @slot slot1
 * @slot slot2
 * @slot slot3
 * @slot slot4
 */

export default class HelloWorld extends LightningElement {
    greeting = 'World';
    changeHandler(event) {
        this.greeting = event.target.value;
    }
}

helloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Hello World</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

Any help is appreciated!

Answer 1

slot is a placeholder for markup that a parent component passes into a component’s body. so, you have to pass the data in to the slots from another component most likely from a parent.

you would have create another component and place the slots in it and pass data/component's body from the parent.

Example:

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

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

slot Documentation

Answer 2

Create Custom Layout Components describes the process for doing so. Everything should work as you've laid it out here. Note that this currently only works on a LWR template, so make sure you're not in Aura or another template type.