Latihan 2 dari materi Slots Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya <div class="alert"> berisi komentar TODO, dan <style> untuk .alert. Biarkan keduanya.
Di dalam <div class="alert">, tulis <h3> yang isinya named slot bernama title dengan fallback Peringatan: <h3><slot name="title">Peringatan</slot></h3>.
Di bawah <h3>, tulis satu slot tanpa nama untuk isi utamanya, dengan fallback Tidak ada pesan. seperti yang diminta kode awal: <slot>Tidak ada pesan.</slot>.
Yang dicek:
Halaman punya .alert, dan <h3> di dalamnya (.alert h3).
Teks <h3> memuat Peringatan. Latihannya merender Alert tanpa induk, jadi yang tampil adalah fallback-nya.
Kodemu menyebut slot name=, dan punya satu <slot tanpa name=. Tulisan di dalam komentar gak dihitung.
Hint
Alert punya dua lubang: satu bernama title di dalam judul, dan satu tanpa nama untuk isi utamanya. Keduanya punya teks cadangan.
Named slot memakai atribut name, slot default gak. Teks cadangan ditulis di antara tag pembuka dan penutup tiap slot.
<div class="alert"> <h3><slot name="title">Peringatan</slot></h3> <slot>Tidak ada pesan.</slot> </div>
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...