As an authoring convenience, snippets declared directly inside components become props on those components. Take the header and row snippets and move them inside <FilteredList>:
App
<FilteredList
data={colors}
field="name"
{header}
{row}
>
{#snippet header()}...{/snippet}
{#snippet row(d)}...{/snippet}
</FilteredList>
{#snippet header()}...{/snippet}
{#snippet row(d)}...{/snippet}We can now remove them from the explicit props:
App
<FilteredList data={colors} field="name" {header} {row}>
{#snippet header()}...{/snippet}
{#snippet row(d)}...{/snippet}
</FilteredList>Any content inside a component that is not part of a declared snippet becomes a special children snippet. Since header has no parameters, we can turn it into children by removing the block tags...
App
{#snippet header()}
<header>
<span class="color"></span>
<span class="name">name</span>
<span class="hex">hex</span>
<span class="rgb">rgb</span>
<span class="hsl">hsl</span>
</header>
{/snippet}...and renaming the header prop to children on the other side:
FilteredList
<script>
let { data, field, children, row } = $props();
// ...
</script>FilteredList
<div class="header">
{@render children()}
</div>previous next
<script>
import FilteredList from './FilteredList.svelte';
import { colors } from './data.js';
</script>
<FilteredList
data={colors}
field="name"
{header}
{row}
></FilteredList>
{#snippet header()}
<header>
<span class="color"></span>
<span class="name">name</span>
<span class="hex">hex</span>
<span class="rgb">rgb</span>
<span class="hsl">hsl</span>
</header>
{/snippet}
{#snippet row(d)}
<div class="row">
<span class="color" style="background-color: {d.hex}"></span>
<span class="name">{d.name}</span>
<span class="hex">{d.hex}</span>
<span class="rgb">{d.rgb}</span>
<span class="hsl">{d.hsl}</span>
</div>
{/snippet}
<style>
header, .row {
display: grid;
align-items: center;