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:
Any idea how to achieve it?
note: see the sample repl