Cara Kerja Slot di Svelte

"slot" digunakan untuk memasukkan konten ke dalam komponen. Slot memungkinkan komponen untuk menerima konten dinamis yang dapat bervariasi dari satu penggunaan komponen ke penggunaan komponen lainnya.
Buat komponen seperti dibawah ini dengan nama: `Welcome` 
<div>
    <h2>Selamat datang di halaman</h2>
    <slot></slot>
</div>
Dalam contoh di atas, slot digunakan untuk menempatkan konten apa pun di dalam komponen. Ketika komponen ini digunakan, konten yang diberikan akan dimasukkan ke dalam slot tersebut. Misalnya: 
<Welcome>
  <p>Ini adalah paragraf dalam slot komponen.</p>
  <button>Tombol dalam slot komponen</button>
</Welcome>
Perhatikan baris yang di highlight 
<div>
    <h2>Selamat datang di halaman</h2>
    <slot></slot>
</div>
"<slot></slot>" akan digantikan oleh konten yang ada di dalam komponen "<Welcome></Welcome>" 
<Welcome>
  <p>Ini adalah paragraf dalam slot komponen.</p>
  <button>Tombol dalam slot komponen</button>
</Welcome>
Sehingga kode akhir yang kita dapatkan menjadi seperti ini 
<div>
    <h2>Selamat datang di halaman</h2>
    <p>Ini adalah paragraf dalam slot komponen.</p>
  	<button>Tombol dalam slot komponen</button>
</div>

Cara Kerja Named Slot

Named slot memungkinkan Anda untuk menentukan slot komponen yang lebih spesifik untuk menempatkan konten.
Buat komponen seperti dibawah ini dengan nama: `Welcome` 
<!-- Welcome.svelte -->
<div>
	<h2>Selamat datang di halaman</h2>
	<slot></slot>
	<slot name="footer"></slot>
</div>

<!-- +page.svelte -->
<Welcome>
	<p>Ini adalah paragraf dalam slot komponen.</p>
	<button>Tombol dalam slot komponen</button>
	<div slot="footer">
		<p>Ini adalah paragraf dalam named slot "footer".</p>
		<button>Tombol dalam named slot "footer"</button>
	</div>
</Welcome>
Dalam contoh di atas, kita memiliki komponen "Welcome" dengan dua slot.Slot pertama menggunakan slot default (tanpa nama) dan slot kedua menggunakan named slot dengan nama "footer"
Sehingga kode akhir yang kita dapatkan menjadi seperti ini 
<div>
	<h2>Selamat datang di halaman</h2>
	<p>Ini adalah paragraf dalam default slot komponen.</p>
	<button>Tombol dalam default slot komponen</button>
	<div>
		<p>Ini adalah paragraf dalam named slot "footer".</p>
		<button>Tombol dalam named slot "footer"</button>
	</div>
</div>

Terima kasih

Semoga Bermanfaat