SVElte5 Snippets Children Slot

Ringkasan

Svelte 5 menggantikan <slot> dengan snippets — reusable JSX-like blocks yang bisa di-pass sebagai prop, termasuk children.

Konsep Dasar

• {@render children()} merender konten default.
• {#snippet nama(param)}...{/snippet} mendefinisikan snippet.
• Snippet di-pass sebagai prop: <Card header={headerSnippet} />.
• Lebih fleksibel & ter-type dibanding slot.

Cara Kerja / Struktur

svelte

<!-- Child.svelte -->
<script>let { children, title } = $props();</script>
<section>{@render title()} {@render children()}</section>
 
<!-- Parent -->
{#snippet head()} <h2>Judul</h2> {/snippet}
<Child {head}>Isi konten</Child>

Catatan Implementasi

• Snippet bisa menerima argumen → komposisi dinamis.
• <slot> masih didukung (legacy) tapi snippet adalah masa depan.

Kesalahan Umum

• Mencoba {@render children} tanpa () → harus children().
• Snippet belum didefinisikan saat dipakai (hoisting tidak berlaku).

Glosarium

• Snippet: blok kode reusable ala JSX.
• Children: konten default dari parent.

Referensi

• Svelte Component Syntax