Skip to content

Commit 343f3d8

Browse files
committed
add template
1 parent e12fe87 commit 343f3d8

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

documentation/docs/03-template-syntax/06-snippet.md

+26
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,32 @@ Snippets can reference themselves and each other ([demo](/playground/untitled#H4
112112

113113
## Passing snippets to components
114114

115+
```svelte
116+
<Component>...</Component> <!-- uses the children prop -->
117+
```
118+
119+
```svelte
120+
<Component>
121+
{#snippet children()}...{/snippet}
122+
{#snippet foo()}...{/snippet}
123+
</Component>
124+
```
125+
126+
```svelte
127+
{#snippet children()}...{/snippet}
128+
{#snippet foo()}...{/snippet}
129+
<Component {children} {foo}/>
130+
```
131+
132+
```svelte
133+
/// file: Component.svelte
134+
<script>
135+
let { children, foo } = $props();
136+
</script>
137+
{@render children()}
138+
{@render foo()}
139+
```
140+
115141
Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
116142

117143
```svelte

0 commit comments

Comments
 (0)