How to render standard component inside slot tag in experience cloud?

Question

I can render any custom lwc component inside another lwc component. My approach is similar to this.

<template>
    <h1>Log In</h1>
    <div>
        <slot name="longin">
            <c-login></c-login>
        </slot>
    </div>
</template>

The login component is a custom component created by me. Now I want to render an standard component inside slot. I'M following the same procedure but not working.

For example, I'm trying to render standard calender component inside slot by the following code.

<template>
    <h1>Calender</h1>
    <div>
        <slot name="calendar">
            <c-calendar></c-calendar>
        </slot>
    </div>
</template>

But its not working. How to achieve that ?

Answer 1

The c in c-calendar means "custom," as in a component you wrote.

If you're using a component from the system library, it'd be something like <lightning-calendar> (which doesn't exist).

That's not how slots work. You put a slot name on the element you wish to embed in the other component. For example:

<lightning-card>
  <button onclick={doSomething} slot="actions">
</lightning-card>

The syntax you've written provides the default content (a c-calendar), which could be overridden by a parent component with:

<c-custom-component>
  <c-other-calendar slot="calendar"></c-other-calendar>
</c-custom-component>