Gölge DOM, kafanızı çevirmeniz zor bir konudur. Karmaşık bir iş. Web'de alışkın olmadığımız, tanıdık olmayan kavramları tanıtıyor. Gölge sınırları, stil kapsamı oluşturma, etkinlik yeniden hedeflemesi, ekleme noktaları, gölge ekleme noktaları, ana makine düğümleri, dağıtılmış düğümler ve bu şekilde dil uzatılır.
Gölge DOM'yi kavramsal olarak vergilendiren şeylerden biri, nihai ürününüzün (DOM) tarayıcı tarafından oluşturulma biçimidir. Ana makine düğümünden gelen düğümler sihirli bir şekilde ShadowRoot'un ekleme noktalarına doğru kaydırılır, ancak mantıksal olarak hâlâ ana makine düğümünde kalırlar. Tuhaf! Dolayısıyla, oluşturma sırasında gölge ağacının bir parçası olarak görünürler, orijinal ana makinenin bir parçası olarak görünmezler. Gölge DOM'un en kafa karıştırıcı parçalarından biri, bu oluşturma işleminin nasıl yapıldığıdır.
Birkaç gün önce, öğrenme eğrisini kısaltmaya yardımcı olması için üzerinde çalıştığım Gölge DOM Görselleştirici adlı aracı kullanıma sundum.
Gölge DOM'un tarayıcıda nasıl oluşturulduğunu görsel olarak görmenizi sağlar. DevTools'un şu anda sahip olmadığı bir özellik. Soldaki siyah kod bloklarının her ikisi de düzenlenebilir. Sağdaki birleştirilmiş (oluşturulmuş) ağacın nasıl etkilendiğini görmek için <content> kampanya noktasını değiştirmeyi, kaldırmayı veya yenilerini eklemeyi deneyin.
Soldaki ilgili işaretlemeyi vurgulamak için farenizle grafikteki düğümlerin üzerine gelin. Yaşasın d3.js! Mavi düğümler ana makine düğümünden geliyor. Sarı düğümler Gölge DOM'den gelir. <content> ekleme noktası, iki dünya arasındaki köprüdür. Mantıksal olarak Gölge DOM içinde olduklarından sarı renktedir. Mavi kenarlıklar, oluşturma partisine mavi ana makine düğümlerini davet ettiklerini gösterir.
Gölge DOM, Chrome 25'te, <template> öğesi ise Chrome 26'da mevcuttur (ancak demoyu denemek için yalnızca ilkini kullanmanız gerekir).