You have a child and a parent component. The snippet is declared on the parent and rendered on the child.
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.
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.