Svelte Component Syntax Markup Script Style Scoped

Definisi

Komponen Svelte (.svelte) terdiri dari tiga bagian: <script> (logika), markup HTML (template), dan <style> (style yang otomatis scoped ke komponen itu saja).

Kapan dipakai

Setiap bagian UI yang berulang atau punya state sendiri layak jadi komponen. Pola ini menggantikan fungsi render panjang jadi file deklaratif.

Cara kerja

Tiga blok

svelte

<script>
  let nama = "Budi";
</script>
 
<h1>Halo {nama}</h1>
 
<style>
  h1 { color: teal; }
</style>

h1 di atas hanya berlaku untuk komponen ini (Svelte menambahkan class hash).

Directive umum

svelte

<!-- event -->
<button on:click={handler}>Klik</button>
 
<!-- conditional -->
{#if show}
  <p>Terlihat</p>
{:else}
  <p>Tersembunyi</p>
{/if}
 
<!-- list -->
{#each items as item (item.id)}
  <li>{item.label}</li>
{/each}

Binding dua arah

svelte

<input bind:value={nama} />
<p>Ketik: {nama}</p>

Struktur komponen

Catatan implementasi

• Key pada {#each} wajib untuk list dinamis agar patch DOM benar (pakai id unik, bukan index).
• on: bisa di-shortcut onclick di Svelte 5, tapi on:click masih luas dipakai.
• Style scoped tidak tembus ke child除非 pakai :global().
• Ekspor komponen cukup import Counter from './Counter.svelte'.

Kesalahan umum

• Lupa key di each: reorder list rusak karena Svelte track by index.
• Ngira style child ke-kena: scoped hanya untuk elemen di file ini.
• Mencampur banyak logic di markup: pindahkan ke <script> biar baca.
• Binding ke variabel belum dideklarasikan: bind:value={x} butuh let x.

Referensi terkait

• Svelte Memulai: Instalasi, Struktur, Reactivity Dasar
• Svelte Props & Events: export let, createEventDispatcher, bind
• React Hooks: useState, useEffect, useMemo, useCallback, useRef