Shadow DOM adalah topik yang sulit dipahami. Hanya saja rumit. Web3 memperkenalkan konsep asing yang tidak biasa kita gunakan di web. Batas bayangan, cakupan gaya visual, penargetan ulang peristiwa, titik penyisipan, titik penyisipan bayangan, node host, node terdistribusi,...istilahnya terus berlanjut.
Satu hal yang secara konseptual merepotkan tentang Shadow DOM adalah cara produk akhir (DOM) Anda dirender oleh browser. Node dari node host secara ajaib diubah menjadi titik penyisipan ShadowRoot, tetapi secara logis, node tersebut masih tetap berada di node host. Aneh! Jadi, pada waktu render, elemen tersebut muncul sebagai bagian dari hierarki bayangan, bukan host asli. Cara rendering ini berlangsung adalah salah satu bagian Shadow DOM yang paling membingungkan.
Beberapa hari yang lalu, saya merilis alat yang telah saya kerjakan bernama Shadow DOM Visualizer untuk membantu mengurangi kurva belajar.
Dengan begitu, Anda dapat melihat secara visual cara Shadow DOM dirender di browser, sesuatu yang tidak dimiliki DevTools saat ini. Kedua blok kode hitam di sebelah kiri dapat diedit. Coba ubah titik penyisipan <content>, hapus, atau tambahkan yang baru untuk melihat pengaruh hierarki gabungan (dirender) di sebelah kanan.
Arahkan kursor ke node dalam grafik untuk menandai markup yang relevan di sebelah kiri. Selamat untuk d3.js! Node biru berasal dari node host. Node kuning berasal dari Shadow DOM. Titik penyisipan <content> adalah jembatan
antara dua dunia. Karena secara logis berada di DOM Bayangan, elemen tersebut berwarna kuning. Batas biru menunjukkan bahwa node host biru diundang ke dalam pihak rendering.
Shadow DOM tersedia di Chrome 25 dan elemen <template> tersedia di Chrome 26 (meskipun Anda hanya memerlukan yang pertama untuk mencoba demo).