Svelte Slots

[kevpye-fabdata]

Hi there, thank you for all your work on this project.

I am trying to integrate storybook into a brand new sveltekit project - created today. The project is working as expected - sveltekit version is 1.5.0 and @storybook/svelte is 7.0.17. I am wondering if someone can help me understand how I can use svelte slots in my stories. I cannot find any documentation on how to do this, neither with a default slot nor a named slot.

Say I have a simple svelte button component named Button.svelte like this:

<script lang="ts">
    export let width = '120px';
</script>

<button class={`width: ${width}`}>
    <slot />
</button>

I create a story named Button.stories.ts like this:

import type { Meta, StoryObj } from '@storybook/svelte';
import Button from '.Button.svelte';

const meta = {
	title: 'Components/Button',
	tags: ['autodocs'],
	component: Button,
	argTypes: {
		width: { control: 'text' }
	}
} satisfies Meta<Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
	render: (args) => ({
		Component: Button,
		props: args
	}),
	args: {}
};

When the storybook renders in the browser i can see a section called Slots, which lists one slot named default. What I can't figure out is how to populate content in this slot. In the react docs the render function for the story can return JSX, which would allow me to place text or a sub component, but this isn't the case for the svelte renderer.

React example:

export const Default: Story = {
    render: (args) => (
        <Button {...args}>
            <TextWithIcon />
        </Button>
  ),
   args: {}
};

My example is very simple, where the slot would just receive text, how can I add text to the slot. And, how about a more complex example, like the react example above, where a slot (default or named) can take a svelte component?

Any help greatly appreciated.
Thanks

[f3bw]

Good day,

(FYI, I am not a regular svelte user)

Maybe, you can achieve a similar result by passing content to slots using the slot property in the Storybook story.

Here's how you can modify your example to achieve a similar effect in Svelte:

import Button from './Button.svelte';
import TextWithIcon from './TextWithIcon.svelte';

export const Default = () => ({
  Component: Button,
  props: {}, // Optionally, provide props for your component
  slot: `
    <TextWithIcon />
  `,
});

In the example above, we define a Default story where we provide the Button component as the Component property and any necessary props. Instead of using a render function like in React Storybook, we pass the content directly to the slot property as a string. Here, we're passing the <TextWithIcon /> component as the content.

Inside the Button.svelte component, you would define the slot and render it at the appropriate location:

<script>
  export let title;
</script>

<div>
  <h1>{title}</h1>
  <slot></slot> <!-- Default slot -->
  <slot name="footer"></slot> <!-- Named slot -->
</div>

In this case, you would need to ensure that the TextWithIcon component is defined and imported correctly.

Let me know if this helped!

[kevpye-fabdata]

Hi @fabricewerger

Thanks for your reply and assistance, unfortunately your suggestion does not seem to work - nothing is rendered into the slot. It also seems rendering this way stops the controls from working so you can't change the appearance of the component from the storybook UI. Lastly, you also lose the type inference for the props. These are the options I have tried to render./ test - I am just showing the story config, the meta details are in my initial question. I have added comments to the examples below

The TextWithIcon component shown below is just a svelte file containing a span with some text for testing. 

/* 
Based on the sample button from when you init storybook - using the meta properties to set arg types etc
This setup does not have a slot property according to typescript, I tried to set one just in case the declaration was missing but it does nothing. The button renders, I can change the width using the controls in the UI as defined by the argtypes from meta.
*/
export const Default: Story = {
	args: {}
};

/*
The button renders with no content in the slot. 
A warning is given in the storybook UI above the controls it says: This story is not configured to handle controls.
*/
export const DefaultWithSlotComponent = () => ({
	Component: Button,
	props: {}, // Optionally, provide props for your component
	slot: `
            <TextWithIcon />
      `
});

/*
The button renders with no content in the slot. Just testing to see if normal HTML would render
A warning is given in the storybook UI above the controls it says: This story is not configured to handle controls.
*/
export const DefaultWithSlotComponent = () => ({
	Component: Button,
	props: {}, // Optionally, provide props for your component
	slot: `
            <span>test</span>
      `
});

/*
The span renders with the text. Just including this to make sure in the storybook UI that the component is correctly imported.
*/
export const TextWithIcon = () => ({
	Component: TextWithIcon,
	props: {}
});

Thanks again for your help. I am super new to storybook and this is my first time using v7.

[Nickersoft]

I've just run into this myself and have been pulling my hair out after scouring the docs for an answer 😂 So far the only solution I've found anywhere is to use addon-svelte-csf, which I'm not a huge fan of because it still seems to lack some features of the ES6 CSF format (such as specifying tags) and has so-so TS support inside the Svelte markup. It's also experimental, I think.

Slots are a major feature of Svelte and the fact that there are so many docs about using Svelte + SvelteKit with Storybook but no discussion of using slots is mind-boggling to me. I'm tempted to open an issue about it.

[j3rem1e]

This addon should support all Storybook features.

If it's not the case or if you see something missing, please fill an issue.

[alexbjorlig]

Hi @Nickersoft - just ran into the same issue 🤔

Did you find a solution to this issue?

[algoflows]

Same blocked on this issue.

[Nemerion]

This issue it still on progress. They released Storybook 8 and also 'addon-svelte-csf' was updated a lot, but I am still not able to find a document or something that deals with this issue.

[phocks]

Svelte Slots will be deprecated in Svelte 5. Hopefully Storybook finds the time to fully support Svelte 5 when it drops. https://svelte-5-preview.vercel.app/docs/snippets#snippets-and-slots

[yjavaherian]

Hi 👋.
for anyone here trying to figure out how to do this in svelte 5 (with snippets), this is how i managed to do it:

component.svelte:

<script lang="ts">
    const { children, btn } = $props(); // 👈 fetch snippets here
</script>

<div >
    <button >
        {@render btn()}   <!-- 👈 use snippets like this -->
    </button>
    <div>
        {@render children()}
    </div>
</div>

component.stories.svelte

<script module>
  import { defineMeta } from "@storybook/addon-svelte-csf";
  import Component from "./component.svelte";

  const { Story } = defineMeta({
    component: Component,
  });
</script>

{#snippet btn()} 
<p> Hi  </p>
{/snippet}

{#snippet children()}
  <ul>
    <li >option 1</li>
  </ul>
{/snippet}

<Story name="Primary" args={{ btn, children }} />