attachShadow dan Shadow Root
Buat pohon bayangan terenkapsulasi pada elemen host.
attachShadow dan Shadow Root adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Itu DOM Bayangan
DOM bayangan memberi elemen pohon DOM terisolasi sendiri ("pohon bayangan") yang tidak muncul di DOM utama halaman. CSS luar tidak merembes ke dalam, CSS dalam tidak merembes ke luar—enkapsulasi sempurna untuk komponen.
Memasang Akar Bayangan
Panggil this.attachShadow({ mode: "open" }) dari konstruktor atau connectedCallback elemen khusus. Metode tersebut mengembalikan ShadowRoot, yang dapat Anda isi seperti pohon DOM biasa menggunakan innerHTML, appendChild, dan seterusnya.
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = "<style>p{color:red}</style><p>Hello</p>";
}
}Mode Terbuka vs Tertutup
mode: "open" mengekspos pohon bayangan sebagai element.shadowRoot. mode: "closed" menyembunyikannya—element.shadowRoot mengembalikan null, sehingga skrip luar tidak dapat memasuki pohon tersebut. Mode tertutup jarang berguna dalam praktik karena kode yang sama yang mendefinisikan elemen tetap dapat menyimpan referensinya sendiri.
Enkapsulasi Gaya
Gaya yang didefinisikan di dalam pohon bayangan (melalui <style> atau lembar gaya yang diadopsi) hanya berlaku di dalam pohon bayangan tersebut. Pemilih CSS dalam dokumen utama tidak pernah cocok dengan turunan bayangan, dan gaya bayangan tidak pernah merembes keluar ke dokumen.
Pemilih :host
Dari dalam pohon bayangan, elemen host (elemen khusus itu sendiri) dipilih dengan kelas semu khusus :host. :host(.large) cocok ketika host memiliki kelas .large; :host([disabled]) cocok ketika host memiliki atribut disabled.
:host {
display: block;
padding: 16px;
border: 1px solid #ccc;
}
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}display: block pada Elemen Khusus
Elemen khusus secara bawaan memiliki display: inline. Di dalam akar bayangan, terapkan :host { display: block } agar elemen berperilaku seperti komponen tingkat blok. Melupakan hal ini adalah penyebab umum bug berupa lebar 100% yang diabaikan.
Komposisi Acara
Acara yang menggelembung keluar dari pohon bayangan targetnya diubah ke host. Klik pada tombol bagian dalam sampai ke pendengar luar dengan event.target === host. Gunakan event.composedPath() untuk melihat target internal yang sebenarnya jika Anda memerlukannya.
composed: true untuk Peristiwa Khusus
Peristiwa khusus yang dikirim di dalam shadow root tidak melewati batas kecuali Anda membuatnya dengan bubbles: true dan composed: true. Tanpa composed, pendengar di luar pada host tidak akan pernah melihat peristiwa tersebut.
Skrip Tidak Dapat Menyusup
Skrip di luar dapat menelusuri elemen host, tetapi tidak dapat menelusuri turunan shadow-nya. document.querySelector("my-card span") tidak mengembalikan apa pun jika <span> berada di dalam pohon shadow. Enkapsulasi melindungi bagian internal dari keterkaitan yang tidak disengaja.
Shadow DOM Deklaratif
Dengan <template shadowrootmode="open"> di dalam HTML sebuah elemen, peramban membangun pohon shadow saat parsing tanpa JavaScript. Ini membuat komponen yang dirender di server mudah dihidrasi karena pohon shadow sudah ada sebelum JS dijalankan.
Pertimbangan Kinerja
Setiap shadow root memiliki overhead—cakupan gaya tambahan dan lapisan perenderan tambahan. Ratusan shadow root tidak masalah; puluhan ribu mungkin berdampak. Untuk antarmuka dengan kepadatan sangat tinggi (tabel besar, daftar tervirtualisasi), lakukan profiling untuk memastikan biaya shadow DOM dapat diterima.
Uji Pemahaman
Apa yang dilakukan mode terbuka yang tidak dilakukan mode tertutup?
Ringkasan
attachShadow({ mode: "open" }) membuat subpohon DOM terisolasi tempat CSS dan ID tidak merembes ke arah mana pun. Tata host dengan :host, ingat display: block, dan gunakan composed: true untuk peristiwa yang harus keluar. Selain itu, pohon shadow berperilaku seperti DOM biasa—innerHTML, appendChild, dan querySelector semuanya berfungsi secara normal di dalamnya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “attachShadow dan Shadow Root” gratis?
Ya — teks lengkap “attachShadow dan Shadow Root” 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 “attachShadow dan Shadow Root”?
Buat pohon bayangan terenkapsulasi pada elemen host. 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 1 dari 4.
Berapa lama pelajaran “attachShadow dan Shadow Root” 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