How to use components with slot variable.

[scorsi]

Hello,

This title may be not clear... An example may be better:

I have this component which declares a slot and gives two slot variable which are in fact components

<script lang="ts">
    import AvatarImage from './AvatarImage.svelte';
    import AvatarFallback from './AvatarFallback.svelte';
</script>
<div>
    <slot {AvatarImage} {AvatarFallback} />
</div>

We use it like so:

<Avatar let:AvatarImage let:AvatarFallback>
    <AvatarImage src="https://randomuser.me/api/portraits/women/33.jpg" />
    <AvatarFallback>👩‍💻</AvatarFallback>
</Avatar>

I wonder how to use that inside the svelte addon because I tried multiple things and still got this error

this={...} of <svelte:component> should specify a Svelte component.

Here how I use it (which doesn't work)

<Meta title="Avatar" component={Avatar} />

<Template let:args> <!-- also tried here -->
    <Avatar {...args} />
</Template>

<Story name="Example" let:AvatarImage let:AvatarFallback>
    <AvatarImage src="https://randomuser.me/api/portraits/women/33.jpg" />
    <AvatarFallback>👩‍💻</AvatarFallback>
</Story>

I guess it works similar has if it was:

<script>
  let active = false;
</script>
<slot {active} />

[Tyneor]

Hello,

You have to use your component in the Template or in the Story, like so :

<Story name="Example">
  <Avatar let:AvatarImage let:AvatarFallback>
    <AvatarImage src="https://randomuser.me/api/portraits/women/33.jpg" />
    <AvatarFallback>👩‍💻</AvatarFallback>
  </Avatar>
</Story>

It worked on my side, hope this helps !

[benmccann]

It looks like this was answered

[scorsi]

Hello,

You have to use your component in the Template or in the Story, like so :

<Story name="Example">
  <Avatar let:AvatarImage let:AvatarFallback>
    <AvatarImage src="https://randomuser.me/api/portraits/women/33.jpg" />
    <AvatarFallback>👩‍💻</AvatarFallback>
  </Avatar>
</Story>

It worked on my side, hope this helps !

Thanks !