The Svelte tutorial demonstrates how to declare a table row snippet:
<tbody>
{#snippet monkey()}...{/snippet}
{@render monkey()}
</tbody>
So far so good. Makes sense to put a snippet close to where it is being used - a table row snippet indeed belongs in tbody
.
I also want to reuse a table row snippet. Except I use the Flowbite Svelte component library. So the code looks like this:
<Table>
...
<TableBody>
{#snippet row(row: UserProductListEntry)}
{row.product.title}
{/snippet}
This works at runtime, but it has issues due to the snippet implicitly becoming TableBody's prop:
So the question is, is there a way to opt out this snippet from becoming an implicit prop? Or at least deal with issue 1 somehow, without moving the snippet out of the TableBody and Table?
The error is a bit of a false positive and is triggered by passing a snippet to a component that uses slots rather than snippets & @render
. (I reported this already.)
Snippet to slot interop only works if snippets are passed as props that share the name of the slot.
In cases where you only want a local snippet, you could explicitly declare the default slot/snippet. So for a Svelte 5 which uses a children
snippet that usually can be omitted:
<Component>
{#snippet children()}
{#snippet localSnippet()} ... {/snippet}
{@render localSnippet()}
{/snippet}
</Component>
For legacy components like currently those of Flowbite, you probably need a default
slot element/fragment instead.
To avoid the error, for now you could use <slot>
syntax like this:
<TableBody>
<svelte:fragment slot="row" let:item={row} >
{row.product.title}
</svelte:fragment>
(This code would use the row
slot as intended; the component already loops over all rows, so you only have to define a row
snippet or slot to render everything.)