Shadow DOM

TL;DR: Shadow DOM adalah fitur browser yang membungkus markup dan CSS sebuah komponen dalam ruang terisolasi, sehingga gaya internalnya tidak bocor keluar dan gaya halaman tidak masuk ke dalam. Ini fondasi penting untuk komponen UI yang benar-benar mandiri.

Apa itu Shadow DOM?

Shadow DOM adalah mekanisme enkapsulasi yang memberi sebuah elemen "pohon DOM rahasia" miliknya sendiri. Bayangkan sebuah ruangan kedap suara di dalam rumah: apa yang terjadi di dalam tidak terdengar keluar, dan kebisingan luar tidak masuk. Dalam konteks web, CSS yang ditulis di dalam Shadow DOM hanya berlaku untuk komponen itu, bukan seluruh halaman. Teknologi ini menjadi salah satu pilar Web Components bersama Atomic Design.

Cara Kerja Singkat

• Elemen host memanggil attachShadow() untuk membuat shadow root.
• Markup dan <style> ditempatkan di dalam shadow root.
• CSS di dalamnya tidak bisa diselektor dari luar, dan sebaliknya.

Kenapa Penting?

Bagi tim yang membangun Design System, Shadow DOM menghilangkan konflik CSS yang sering muncul saat komponen dipakai di banyak halaman dengan gaya berbeda. Saya melihat masalah "CSS saling menimpa" hampir hilang ketika primitive dibungkus shadow root, terutama pada proyek yang melibatkan banyak kontributor. Detail teknis tersedia di MDN Shadow DOM.

Pertanyaan Umum

Apakah Shadow DOM membuat halaman lebih lambat?

Tidak signifikan. Enkapsulasi justru sering menyederhanakan CSS karena selektor menjadi lebih sempit dan terprediksi.

Apakah konten Shadow DOM terindeks Google?

Umumnya ya untuk shadow DOM terbuka, namun untuk konten yang krusial bagi SEO, render sisi server tetap lebih aman.