So, you will have the snippet where you want it to be rendered on the child:
```child.svelte
<script> let { myFirstSnippet, mySecondSnipper } = $props(); </script>
<div id="Your first snippet goes here"> {@render myFirstSnippet()} </div>
<div id="Your second snippet goes here"> {@render mySecondSnippet()} </div> ```
Here we are declaring that this child takes 2 snippets called `myFirstSnippet` and `mySecondSnippet` and we place them wherever they might go.
And then on the parent we need to actually build those snippets:
```parent.svelte
<script> import Child from ... </script>
{#snippet myFirstSnippet()} <span>Hello from firstSnippet!</span> {/snippet}
<Child {myFirstSnippet}>
{#snippet mySecondSnippet()} <span>Hello from secondSnippet!</span> {/snippet}
</Child> ```
Here we are taking that `Child` component and rendering the two snippets that will go into it, as you see, you can either pass the snippet as a named prop or you can declare it inside the child component with the same name as the prop the child gets.
The end result of this will be a `Child` component that's rendered on the `Parent` with the two snippets inside this child component.
I hope that clears things up.
Yes, what a completely frivolous change that will only cause headaches.
Changes like this are why I dislike the mentality in the JS ecosystem. It was just cosmetic, and creates unnecessary churn. They seem to be addicted to changing things. They didn't like the old syntax? Though. What's done is done.
Don't make frivolous changes in frameworks damn it.
A real world example: in Svelte 4, I had a custom input component that wrapped an <input> element. To be able to do `<MyInput on:change={callback} />` took a bunch of event forwarding boiler plate (or magic `on:change` syntax to forward that one event). When I wanted to also forward blur events I had to go through the same process. Now in Svelte 5 I can just use `const { foo, ...rest } = $props()` then spread with `<input {..rest}>` and I get all events forwarded for free.
They could have kept the original `on:change` syntax, but that would have made property access more painful (who wants to call `rest['on:change']`?) and would have broken all my other components that I haven't migrated yet.
The same goes for slots to snippets. Being able to pass snippets around like props has allowed me to simplify tons of components where slots were limiting.
As a solo dev working part time on a Javascript project, I definitely hate some of the ecosystem churn, but this is one refactor I'm happy to do, and I'd say the same about most of the Svelte 5 changes.
I love Rich Harris' work and appreciate what he gives to the community, but man he loves to rethink things.