3 ms·
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
by jerojero 2y ago
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.
I hope that clears things up.