Code readability impacted when migrating from slots to snippets

[peterhoward42]

Describe the bug

Context: Migrating components that manage other components from a slots implementation to a snippets implementation.

Problem I will suggest below that something worthwhile is being lost in the translation.

My example is a Hoverable component. It's job is to render some content-A, and then when that is hovered-over, to position and show content-B, as a drop-down content beneath it.

Before

<Hoverable>
    <span slot="hotspot" class="avatar">person</span>
    <UserDropDown slot="content" />
</Hoverable>

After

{#snippet hotspotSnip()}<span class="avatar">person</span>{/snippet}
{#snippet contentSnip()}<UserDropDown />{/snippet}
<Hov2 hotspot={hotspotSnip} content={contentSnip} />

I would argue that the snippet version:

• Loses the valuable implied parent/child/container essence of the slots version
• Obliges the reader to absorb all 3 lines of code, when they might be quite satisfied to see that "it's just some Hoverable".
• Obliges the writer to invent two new names and avoid mistakes in their transcription.

Additional Notes

It could be reduced to a much simpler container component if the children were constrained to be fully fledged components - because then neither slots, nor snippets would be required. The children could be passed in as props very easily in Svelte5. But being able to "pass in" arbitrary content (like the span in my example) is available with slots, and is a documented design goal for snippets.

I'd like to acknowledge the fabulous help I received on solving a problem with the snippets version here.

Apologies if I'm missing another way to skin this particular cat. There's a lot to take on board migrating to Svelte5. (Particularly if you're really a Go developer).

Reproduction

There are before and after working examples in the Svelte REPL referenced in the "fabulous help" link above.

Logs

n/a

System Info

n/a

Severity

annoyance

[brunnerh]

That is not the idiomatic way of migrating this. Usually you would do this:

<Hoverable>
    {#snippet hotspot()}
        <span class="avatar">person</span>
    {/snippet}
    {#snippet content()}
        <UserDropDown />
    {/snippet}
</Hoverable>

Snippets inside components are passed as properties with the same name.
Edit: Given that this is what @dummdidumm already suggested, I am rather confused...

Personally, I would make use of the default slot/children snippet to simplify it to:

<Hoverable>
    <span class="avatar">person</span>

    {#snippet content()}
        <UserDropDown />
    {/snippet}
</Hoverable>

Playground

[paoloricciuti]

Yeah this is not idiomatic way to migrate from slots, furthermore I'm not really getting what this issue is about. Therefore closing. Feel free to reopen if you have an actual feature suggestions or bug.

[peterhoward42]

Thank you both - I hadn't properly grasped two things:

1. that you could compose snippet children in this way
2. that they thus become props to the parent automatically