Snippet's children syntax is confusing #11056
Closed
danielniccoli
started this conversation in
General
Replies: 1 comment
-
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
In Svelte 4, you could create a component with a slot.
I find this straight forward. Everything inside the component's element
<Widget>
will be rendered instead of the components<slot>...</slot>
. If the component is empty<Widget />
its own slot will be rendered.Now in Svelte 5 we have snippets. There is a similar way of achieving the same thing with
{@render children()}
.There's also a note in the docs:
Here's the issue I have with that.
let { data, children, row } = $props();
What the docs mean is probably, that you cannot pass a propchildren
to a component, because the following will not work.<slot />
, while in Svelte 5 you have a variable namedchildren
that has a special meaning. With HTML you are used that tag names have a meaning (div, p, code) but variables can be assigned any name you want. There are some exceptions likeundefined
which are a limitation of the language. I find it confusing if Svelte add such a limitation.let { data, children, row } = $props();
wherechildren
is a reserved prop. However,let { data, header, row } = $props();
is valid as well. And it doesn't even matter ifheader
is at the first, second or third position. It always works. Sochildren
is given a special meaning, but everything else magically works the same? This is confusing because there's not a single defined way of how it works. We had that with<slot />
.<slot>...</slot>
we now must write a more verbose{#if children}{@render children(){:else}...{/if}
Beta Was this translation helpful? Give feedback.
All reactions