Svelte slots & Storybook

Question

I was wondering how to use the native svelte slots in a storybook. For example I would want to change the slot: Button.svelte:

<div role="button"><slot>Button</slot></div>

and also how would you do something like: Button2.svelte:

<div role="button"><slot>Button</slot><slot name="after">After Content</slot></div>

Answer 1

The best solution I found was making a separate component like so:

./Button.svelte

<script lang="ts">
  import Button from "../../lib/components/Button.svelte";

  export let slot = "Button";
</script>

<Button>{@html slot}</Button>

and leaving my $lib/components/Button.svelte untouched.