How to get Svelte Slots working in Storybook.

[TristanBrotherton]

I am documenting Svelte components in Storybook. The Svelte format of <span slot="foo">content</slot> will result in Storybook not knowing there is a slot.
<slot name="foo">content</slot> will result in Storybook knowing there is a slot, but Svelte can not render it because its formatted incorrectly.
The kludgy work-around seems to be to use <slot name="foo" slot="foo">content</slot>

The following example is my hack at getting it to work, but it shows the slots as parameters I'd have to manually hide:
Hero.template.svelte

<script lang="ts">
    import Hero from '$lib/components/section/Hero.svelte';
    import Highlight from '$lib/components/elements/Highlight.svelte';
    /**
     * The title to display in the Hero
     * @type {string}
     */
    export let title: string = '';

    /**
     * Optional subtitle
     * @type {string}
     */
    export let subtitle: string = '';
    /**
     * Flag for rending embedded highlight example
     * @type {string}
     */
    export let hardcoded: boolean = false;
</script>

    <Hero>
        <slot name="title" slot="title">{@html title}</slot>
        <slot name="title" slot="subtitle">{@html subtitle}</slot>
    </Hero>

Hero.stories.ts

import Hero from './Hero.template.svelte';

export default {
    component: Hero
};

export const Title = {
    args: {
        title: 'This is a title.',
        subtitle: "This is a subtitle"
    }
};

As you can see below - also note the slots shown in Storybook are not editable and are shown as JSON inputs, and you have to use the parameters to set the slot content:

What I'd like to be able to do is simply have the slots recognized in the native format and be able to edit them in Storybook not as parameters. If anyone has some input I'd be very grateful.

[elkorman15]

I'm facing the same problem

[chakAs3]

@elkorman15 @TristanBrotherton it is not implemented as feature I guess let me check I may help on this part

[chakAs3]

@elkorman15 @TristanBrotherton I could manage to render one slot by changing the svelte renderer but the problem is that Svelte does not support dynamic slot names, meaning the slot attribute cannot be assigned a variable value. This is because when the component is compiled, the slot names need to be known at compile-time in order for the correct content to be rendered in the correct location.

I managed to do something like this if you are interested I can share it with you, with PR first to be able to pass the slot from the controls

Screen.Recording.2023-01-19.at.5.26.01.PM.mov

[alexeev-dauwalter]

How to get the same result?

[chakAs3]

Hi @Ishi-Inanis that was a workaround to show we can have that in Storybook but the issue is Svelte does not allow dyamic slots, Svelte needs to know everything in build time, so we can not generate the content for named slots, however it would work with default slot only

[elkorman15]

@chakAs3 Could you share the code of your Primary button story?

[chakAs3]

sorry @elkorman15 @ihym i did not check this topic. this was some workaround on the core codebase, we could easy implement this as we already do for vue but the issue is that Svelte not allowing dynamic named slot content.

[aignerchristoph]

@chakAs3 Could you share the code for default slots?

[benbender]

@chakAs3 would you be able to share your solution? I think this is a chokepoint for many (new) users of storybook+svelte…

[chakAs3]

l

@chakAs3 would you be able to share your solution? I think this is a chokepoint for many (new) users of storybook+svelte…

I will check back my PR and share code with team i have done quickly as POC, but i did not finished as that was some limitation with svelte

[petemill]

It would be helpful to have this not marked as an answer so that it's known this is still an issue