Shadow DOM adalah topik yang sulit untuk dipikirkan. Hal ini sangat rumit. Artikel ini memperkenalkan konsep asing yang tidak kita gunakan di web. Batas bayangan, pelapis gaya, penargetan ulang peristiwa, titik penyisipan, titik penyisipan bayangan, node host, node terdistribusi,...istilahnya terus berlanjut.
Satu hal yang secara konseptual membebani Shadow DOM adalah cara hasil akhir (DOM) dirender oleh browser. Node dari node host secara ajaib bergeser ke titik penyisipan ShadowRoot, namun secara logis, masih tetap berada di node host. Aneh! Jadi pada waktu render, mereka akan muncul sebagai bagian dari pohon bayangan dan bukan host aslinya. Bagaimana rendering ini terjadi adalah salah satu bagian Shadow DOM yang paling membingungkan.
Beberapa hari yang lalu, saya merilis alat yang sedang saya kerjakan bernama Shadow DOM Visualizer untuk membantu mengurangi kurva pembelajaran.
Dengan alat ini, Anda dapat melihat secara visual bagaimana Shadow DOM dirender di browser, yang saat ini kekurangan DevTools saat ini. Kedua blok kode hitam di sebelah kiri dapat diedit. Coba ubah titik penyisipan <content>, hapus, atau tambahkan titik penyisipan baru untuk melihat pengaruh hierarki yang digabungkan (dirender) di sebelah kanan.
Arahkan kursor mouse ke node dalam grafik untuk menyoroti markup yang relevan di sebelah kiri. Hore 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 ada dalam Shadow DOM, warnanya kuning. Batas birunya menunjukkan bahwa node host biru mengundang node host biru ke pihak rendering.
Shadow DOM tersedia di Chrome 25 dan elemen <template> tersedia di Chrome 26 (meskipun Anda hanya memerlukan yang pertama untuk mencoba demo).