Elemen Slot untuk Distribusi Konten
Proyeksikan konten host ke shadow DOM dengan slot bernama dan bawaan.
Elemen Slot untuk Distribusi Konten adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Light DOM vs Shadow DOM
Anak-anak yang ditulis di dalam elemen khusus dalam HTML membentuk "light DOM" elemen tersebut—anak-anak itu bukan bagian dari pohon shadow. Secara bawaan, peramban tidak merendernya; pohon shadow harus secara eksplisit memintanya melalui <slot>.
Slot Bawaan
Elemen <slot> di dalam pohon shadow menandai tempat munculnya anak-anak light DOM. Tanpa nama, elemen ini menjadi slot bawaan dan menerima anak langsung apa pun dari host.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Slot Bernama
Beberapa slot dapat dituju berdasarkan nama. Shadow mendeklarasikan <slot name="header">; pengguna memilihnya dengan <h1 slot="header">. Anak dengan atribut slot yang cocok akan mengisi slot tersebut; anak yang tidak cocok masuk ke slot bawaan.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Konten Cadangan Slot
Konten di antara tag slot hanya dirender ketika tidak ada apa pun yang ditetapkan ke slot tersebut: <slot>No content provided</slot>. Gunakan ini untuk menampilkan teks pengganti atau petunjuk pada slot yang kosong.
Pewarisan Gaya di Seluruh Slot
Anak yang ditempatkan di slot tetap berada di light DOM dan mewarisi gaya dari dokumen utama, bukan dari pohon shadow. Gunakan pseudo-elemen ::slotted() dari dalam shadow untuk menatanya: ::slotted(p) { color: red; }.
Keterbatasan ::slotted
::slotted() hanya dapat menargetkan anak langsung dari host (elemen yang benar-benar didistribusikan ke slot). Pseudo-elemen ini tidak dapat menargetkan turunannya. Untuk penataan yang lebih dalam, tampilkan properti kustom CSS atau gunakan ::part pada elemen internal shadow.
Mendeteksi Perubahan Slot
Setiap slot memicu peristiwa slotchange ketika node yang ditetapkan padanya berubah. Dengarkan peristiwa ini untuk merespons pembaruan konten dinamis: slot.addEventListener("slotchange", handler). Ini berguna untuk komponen yang tata letaknya bergantung pada anak yang tersedia.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes dan assignedElements
slot.assignedNodes() mengembalikan semua node yang ditetapkan ke slot, termasuk node teks. slot.assignedElements() hanya mengembalikan anak berupa Element—biasanya inilah yang Anda perlukan saat melakukan iterasi atas konten yang ditempatkan di slot secara terprogram.
Mendistribusikan Anak
Peramban menangani seluruh distribusi secara otomatis berdasarkan atribut slot pada setiap anak. Tidak ada langkah JavaScript—tulis <span slot="footer">...</span> di antara anak light DOM host, dan slot shadow yang sesuai akan memuatnya.
Slot dan Penataan Gaya Host
Gaya milik host sendiri (yang ditetapkan pada <my-card> di dokumen) diterapkan secara kaskade ke anak-anak light DOM, termasuk anak yang akhirnya ditempatkan di slot. CSS shadow melalui ::slotted memiliki spesifisitas lebih tinggi daripada gaya host yang diwariskan ketika keduanya menargetkan properti yang sama.
Kasus Penggunaan Umum
Kartu dengan slot header/body/footer, dialog dengan slot title/content/actions, item daftar dengan slot leading/trailing, serta menu navigasi dengan slot item. Slot membuat elemen khusus dapat dikomposisikan dengan cara yang sama seperti <details>/<summary> atau <table>/<tr>.
Uji Pemahaman
Apa perbedaan antara slot bawaan dan slot bernama?
Ringkasan
Slot memproyeksikan anak light DOM ke tempat tertentu di dalam pohon shadow. Slot bawaan menerima anak apa pun yang tidak bernama; slot bernama menerima anak dengan atribut slot yang cocok. Konten cadangan mengisi slot yang kosong, ::slotted menata anak langsung yang ditempatkan di slot, dan peristiwa slotchange merespons pembaruan konten dinamis.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Elemen Slot untuk Distribusi Konten” gratis?
Ya — teks lengkap “Elemen Slot untuk Distribusi Konten” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Elemen Slot untuk Distribusi Konten”?
Proyeksikan konten host ke shadow DOM dengan slot bernama dan bawaan. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Elemen Slot untuk Distribusi Konten” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- attachShadow dan Shadow Root
- Elemen Slot untuk Distribusi Konten
- Gaya dengan Cakupan di Dalam Shadow DOM
- Part dan Exportparts untuk Gaya Eksternal