Templat dan Slot
Komposisikan komponen dengan template dan slot.
Templat dan Slot adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.
Elemen Templat
Elemen <template> menyimpan HTML pasif yang diurai tetapi tidak ditampilkan. Kontennya tetap berada di luar halaman sampai Anda menyalin dan menyisipkannya, sehingga elemen ini sempurna untuk markah yang dapat digunakan kembali.
Mengakses Konten Templat
Anak-anak templat berada dalam properti .content, yaitu sebuah DocumentFragment. Skrip, gambar, dan gaya di dalamnya tidak dijalankan atau dimuat sampai disisipkan.
// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragmentMenggandakan Templat
Gunakan importNode atau cloneNode(true) untuk menyalin konten templat, lalu sisipkan hasil salinannya. Penggandaan memungkinkan Anda membuat banyak salinan dengan biaya rendah.
const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);Templat di Dalam Komponen
Elemen khusus sering kali menentukan templat sekali, lalu menyalinnya ke dalam akar bayangan pada setiap instans. Cara ini lebih cepat daripada mengurai ulang string HTML setiap kali.
const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';
class MyCard extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.appendChild(tpl.content.cloneNode(true));
}
}
customElements.define('my-card', MyCard);Apa Itu Slot
<slot> adalah tempat penampung di dalam pohon bayangan tempat konten anak milik elemen itu sendiri (yaitu DOM ringan) diproyeksikan. Dengan demikian, pengguna dapat memasukkan konten khusus ke dalam komponen Anda.
// Shadow root markup:
// <div class="box"><slot></slot></div>
// Usage:
// <my-card>This text fills the slot</my-card>Konten Slot Bawaan
Konten yang ditempatkan di antara tag <slot> berfungsi sebagai cadangan. Konten ini hanya ditampilkan saat pengguna tidak menyediakan konten yang cocok.
// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.Slot Bernama
Beberapa slot dapat digunakan bersamaan dengan atribut name. Anak-anak DOM ringan menargetkan sebuah slot dengan atribut slot.
// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>
// Usage:
// <my-card>
// <h2 slot="title">Hello</h2>
// <p slot="body">World</p>
// </my-card>Slot Bawaan (Tanpa Nama)
Slot tanpa name adalah slot bawaan. Setiap anak tanpa atribut slot diproyeksikan ke sana. Anda dapat menggabungkan satu slot bawaan dengan beberapa slot bernama.
// <slot name="header"></slot>
// <slot></slot> <!-- default: catches everything else -->Menerapkan Gaya pada Konten Slot
Gunakan elemen semu ::slotted() untuk menerapkan gaya pada anak yang diproyeksikan dari dalam gaya bayangan. Elemen ini hanya cocok dengan simpul slot tingkat teratas.
// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }Peristiwa Perubahan Slot
Sebuah slot memicu peristiwa slotchange saat simpul yang ditetapkan kepadanya berubah. Dengarkan peristiwa ini untuk merespons saat pengguna menambahkan atau menghapus konten yang diproyeksikan.
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes();
console.log('slot now has', nodes.length, 'nodes');
});Templat dan Slot Bersama
Templat menentukan struktur sekali; slot membuat struktur tersebut fleksibel dengan memungkinkan pengguna memasukkan konten mereka sendiri. Bersama-sama, keduanya mendukung komponen web yang rapi, dapat digunakan kembali, dan dapat disesuaikan.
Pemeriksaan Singkat
Uji pemahaman Anda tentang templat dan slot.
Rangkuman
Anda telah mempelajari templat dan slot:
<template>menyimpan markah pasif yang dapat digunakan kembali dalam.content.- Gandakan dengan
cloneNode(true)sebelum menyisipkannya. <slot>memproyeksikan DOM ringan ke dalam pohon bayangan.- Slot bernama menggunakan
nameserta atributslotmilik anak. ::slotted()menerapkan gaya pada simpul yang diproyeksikan;slotchangemerespons pembaruan.
Anda telah menyelesaikan komponen web. Selanjutnya, API Pengamat Persinggungan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Templat dan Slot” gratis?
Ya — teks lengkap “Templat dan Slot” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Templat dan Slot”?
Komposisikan komponen dengan template dan slot. Kamu berlatih JavaScript 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 JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript 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 4 dari 4.
Berapa lama pelajaran “Templat dan Slot” 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 JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript 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.