Snippet's children syntax is confusing

[danielniccoli]

In Svelte 4, you could create a component with a slot.

<!-- Widget.svelte -->
<div>
	<slot>
		this fallback content will be rendered when no content is provided, like in the first example
	</slot>
</div>

<!-- App.svelte -->
<Widget />
<!-- this component will render the default content -->

<Widget>
	<p>this is some child content that will overwrite the default slot content</p>
</Widget>

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()}.

<script>
-	let { data, header, row } = $props();
+	let { data, children, row } = $props();
</script>

<table>
-	{#if header}
+	{#if children}
		<thead>
-			<tr>{@render header()}</tr>
+			<tr>{@render children()}</tr>
		</thead>
	{/if}

	<!-- ... -->
</table>

There's also a note in the docs:

Note that you cannot have a prop called children if you also have content inside the component — for this reason, you should avoid having props with that name

Here's the issue I have with that.

1. You have a prop that is called children: let { data, children, row } = $props(); What the docs mean is probably, that you cannot pass a prop children to a component, because the following will not work.

<Table children={fruits}>
  	<th>fruit</th>
  	<th>qty</th>
  	<th>price</th>
  	<th>total</th>
</Table>

2. The above could be fixed by clarifying the docs. However, this is also the reason why I find it confusing. In Svelte 4 you had a special tag <slot />, while in Svelte 5 you have a variable named children 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 like undefined which are a limitation of the language. I find it confusing if Svelte add such a limitation.
3. With the example above, we established that we can use let { data, children, row } = $props(); where children is a reserved prop. However, let { data, header, row } = $props(); is valid as well. And it doesn't even matter if header is at the first, second or third position. It always works. So children 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 />.
4. Instead of <slot>...</slot> we now must write a more verbose {#if children}{@render children(){:else}...{/if}

[brunnerh]

1. Props are attributes set on a component, regardless of whether they are explicitly declared.
   So yes, this means you should generally avoid something like <Table children={fruits}> where fruits is not a snippet, if only to prevent confusion.
2. children does not really have a special meaning - inserting content into a component has special meaning.
   I.e. this:

   <Component>
     Content
   </Component>

   implicitly means:

   <Component>
     {#snippet children()}Content{/snippet}
   </Component>

   Content ends up in <slot> vs. content ends up in a prop.
   There isn't really much of a difference there, both are just automatisms you have to know about.
   (You will need the long form if you want to pass arguments to the children snippet.)
3. Prop position does not matter, it's all based on names, just like any JS destructuring.
   There is no difference between children and header on the component side, both are just props, see point 2.
4. Well, in my view that is a small price to pay for the power snippets provide.
   They are also far less confusing to use than slot props and their let:... declarations.

[sdgoldstein]

Slots can be named, but if there is only one, there is a default. Why doesn't the same concept exist for snippets? It would save boilerplate code. Specifically:

<script>
-       import type { Snippet } from "svelte";

        interface TableProps {
          someprop:string;
-        children:Snippet;
        }

-	let { someprop, children } : TableProps = $props();
+	let { someprop } : TableProps = $props();
</script>

<table>
		<thead>
-			<tr>{@render children()}</tr>
+			<tr>{@render}</tr>
		</thead>
	<!-- ... -->
</table>