JavaScript Academy · Pelajaran

Shadow DOM dan Enkapsulasi

Pisahkan gaya dan markup dalam shadow root.

Shadow DOM dan Enkapsulasi adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Apa Itu DOM Bayangan

DOM bayangan memberikan elemen sebuah pohon DOM pribadi yang terenkapsulasi. Markah dan gaya di dalamnya terisolasi dari bagian halaman lainnya.

CSS dari luar tidak merembes ke dalam.
CSS dari dalam tidak merembes ke luar.
Struktur internal tersembunyi dari kueri DOM biasa.

attachShadow

Anda membuat pohon bayangan dengan memanggil this.attachShadow({ mode: 'open' }). Pemanggilan ini mengembalikan sebuah akar bayangan yang dapat Anda isi seperti simpul biasa.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Mode terbuka vs tertutup

Opsi mode mengontrol akses dari luar:

'open' — akar tersebut dapat diakses melalui element.shadowRoot.
'closed' — element.shadowRoot mengembalikan null; hanya kode Anda yang menyimpan referensinya.

Sebagian besar komponen menggunakan 'open' agar proses penelusuran kesalahan lebih mudah.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Mengisi Akar Bayangan

Tetapkan shadowRoot.innerHTML untuk membangun konten yang terenkapsulasi. Markah ini tidak terlihat oleh document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Gaya Berskop

Tag style di dalam akar bayangan hanya memengaruhi akar tersebut. Pemilih yang sama di luar komponen tidak terpengaruh, dan gaya halaman tidak merembes ke dalam.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

Pemilih :host

Di dalam gaya bayangan, :host menargetkan elemen khusus itu sendiri (inang pohon bayangan). Gunakan ini untuk menerapkan gaya pada kotak luar komponen.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Isolasi Gaya dalam Praktik

Enkapsulasi berarti pembuat komponen dan pembuat halaman tidak lagi berebut nama kelas. Aturan .title di dalam satu komponen tidak akan pernah memengaruhi .title di tempat lain.

Tidak ada benturan CSS global.
Pemilih sederhana dan umum kembali aman digunakan.

Menelusuri di Dalam Akar Bayangan

Untuk mengakses simpul internal, lakukan kueri pada akar bayangan, bukan pada dokumen. Akar bayangan mendukung metode pencarian yang sama.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Peristiwa Melintasi Batas

Banyak peristiwa (seperti click) merambat keluar dari DOM bayangan, tetapi dialihkan targetnya sehingga pendengar di luar melihat elemen inang, bukan simpul internal. Hal ini mempertahankan enkapsulasi.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Gaya yang Dapat Diwariskan

Beberapa properti CSS (seperti color dan font-family) diwariskan melewati batas bayangan karena pewarisan mengalir ke bawah pada pohon gabungan. Anda dapat mengikuti tampilan halaman dengan mengandalkan pewarisan atau menggunakan properti khusus CSS.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Kapan Menggunakan DOM Bayangan

Gunakan DOM bayangan saat Anda memerlukan isolasi gaya dan markah yang kuat untuk komponen yang dapat digunakan kembali. Jangan gunakan saat Anda ingin komponen mewarisi dan berpartisipasi secara bebas dalam gaya global halaman.

Pemeriksaan Singkat

Uji pemahaman Anda tentang DOM bayangan.

Rangkuman

Anda telah mempelajari DOM bayangan:

attachShadow({ mode }) membuat pohon yang terisolasi.
'open' membuka akses ke shadowRoot; 'closed' menyembunyikannya.
Tag style internal berskop; :host menerapkan gaya pada elemen itu sendiri.
Kueri dijalankan pada akar bayangan, bukan pada dokumen.
Target peristiwa dialihkan untuk mempertahankan enkapsulasi.

Selanjutnya, kita akan menggunakan kembali markah dengan templat dan slot.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Shadow DOM dan Enkapsulasi” gratis?

Ya — teks lengkap “Shadow DOM dan Enkapsulasi” 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 “Shadow DOM dan Enkapsulasi”?

Pisahkan gaya dan markup dalam shadow root. 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 3 dari 4.

Berapa lama pelajaran “Shadow DOM dan Enkapsulasi” 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.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy