How to forward slots, with fallback slots in Svelte components

178 Views Asked by At

I'm working on a Dropdown component. And I want to create a Select component based on Dropdown.svelte.

I want the Select component to use the fallbacks slots of Dropdown component.

I created this simple example, a Card component with two slots, each with a fallback content, to reproduce the issue:

<!-- Card.svelte -->
<script>
    export let name = '';
    export let phone = '';
</script>

<div>
    This is a card
    <slot name='name'>
        <div>hello {name}</div>
    </slot>

    <slot name='phone' {phone}>
        <div>call me at {phone}</div>
    </slot>
</div>

I want to create a AnonCard component based on this Card component. I should be able to customize it specifying custom slots, and if not specified I want it to use the Card.svelte fallback.

this is AnonCard.svelte

<!-- AnonCard.svelte -->
<script>
    import Card from './Card.svelte'
</script>

<Card name="Anonymous" phone="no phone">

    <slot name="name" slot="name" />

    <slot name="phone" slot="phone" />
</Card>

If I customize the name and phone slots, it works ok, but If I leave them empty the slot fallbacks from Card.svelte are NOT used.

See a screenshots:

enter image description here

Any idea how to achieve it?

note: see the sample repl

0

There are 0 best solutions below