Gölge DOM, anlaşılması zor bir konudur. Bu süreç karmaşıktır. Web'de alışkın olmadığımız, yabancı kavramlar içeriyor. Gölge sınırları, stil kapsamı, etkinlik yeniden hedefleme, ekleme noktaları, gölge ekleme noktaları, ana makine düğümleri, dağıtılmış düğümler...Liste uzayıp gidiyor.
Gölge DOM ile ilgili kavramsal olarak zor olan bir nokta, nihai ürününüzün (DOM) tarayıcı tarafından oluşturulma şeklidir. Ana düğümdeki düğümler, sihirli bir şekilde bir ShadowRoot'un ekleme noktalarına taşınır ancak mantıksal olarak ana düğümde kalır. Tuhaf. Bu nedenle, oluşturma sırasında orijinal ana makinenin değil, gölge ağacının bir parçası olarak görünürler. Bu oluşturma işleminin nasıl gerçekleştiği, Gölge DOM'un en kafa karıştırıcı kısımlarından biridir.
Birkaç gün önce, öğrenme sürecini kolaylaştırmaya yardımcı olmak için üzerinde çalıştığım Shadow DOM Visualizer adlı bir aracı kullanıma sunduk.
Gölge DOM'un tarayıcıda nasıl oluşturulduğunu görsel olarak görmenize olanak tanır. Bu özellik şu anda DevTools'ta yoktur. Soldaki iki siyah kod bloğu düzenlenebilir. Sağdaki birleştirilmiş (oluşturulan) ağacın nasıl etkilendiğini görmek için <content> ekleme noktalarını değiştirmeyi, kaldırmayı veya yenilerini eklemeyi deneyin.
Soldaki ilgili işaretlemeyi vurgulamak için fareyle grafiğin düğümlerinin üzerine gelin. d3.js için tebrikler. Mavi düğümler ana makine düğümünden gelir. Sarı düğümler, Gölge DOM'den gelir. <content> ekleme noktaları, iki dünya arasındaki köprüdür. Mantıksal olarak Gölge DOM'da oldukları için sarı renktedir. Mavi kenarlıkları, mavi ana makine düğümlerini oluşturma partisine davet ettiklerini gösterir.
Gölge DOM, Chrome 25'te, <template> öğesi ise Chrome 26'da kullanılabilir (demoyu denemek için yalnızca ilkine ihtiyacınız vardır).