शैडो डीओएम एक ऐसा विषय है जिसे समझना मुश्किल है. यह सिर्फ़ मुश्किल है. इसमें ऐसे कॉन्सेप्ट शामिल हैं जो वेब पर आम तौर पर इस्तेमाल नहीं किए जाते. शैडो बाउंड्री, स्टाइल स्कोपिंग, इवेंट रीटारगेटिंग, इंसर्शन पॉइंट, शैडो इंसर्शन पॉइंट, होस्ट नोड, डिस्ट्रिब्यूटेड नोड...इस तरह की भाषा का इस्तेमाल बहुत होता है.
शैडो डीओएम के बारे में एक बात यह है कि ब्राउज़र आपके फ़ाइनल प्रॉडक्ट (डीओएम) को जिस तरह रेंडर करता है वह समझने में मुश्किल होता है. होस्ट नोड के नोड, जादू की तरह शैडो रूट के इंसर्शन पॉइंट में स्विज़ल हो जाते हैं. हालांकि, लॉजिक के हिसाब से, वे अब भी होस्ट नोड में ही बने रहते हैं. अजीब! इसलिए, रेंडर के समय वे ओरिजनल होस्ट के बजाय, शैडो ट्री के हिस्से के तौर पर दिखते हैं. शैडो डीओएम के बारे में सबसे ज़्यादा भ्रमित करने वाली बात यह है कि यह रेंडरिंग कैसे होती है.
मैंने कुछ दिन पहले एक टूल रिलीज़ किया था. इस टूल पर मैं पिछले कुछ समय से काम कर रहा था. इसका नाम शैडो डीओएम विज़ुअलाइज़र है. इसकी मदद से, शैडो डीओएम को समझना आसान हो जाता है.
इससे आपको यह विज़ुअल तौर पर देखने में मदद मिलती है कि शैडो डीओएम, ब्राउज़र में कैसे रेंडर होता है. फ़िलहाल, DevTools में यह सुविधा उपलब्ध नहीं है. बाईं ओर मौजूद दोनों काले कोड ब्लॉक में बदलाव किया जा सकता है. <content> इंसर्शन पॉइंट बदलने, हटाने या नए जोड़ने की कोशिश करें. इससे, दाईं ओर मौजूद कंपोज़ किए गए (रेंडर किए गए) ट्री पर पड़ने वाले असर को देखा जा सकता है.
बाईं ओर मौजूद काम के मार्कअप को हाइलाइट करने के लिए, ग्राफ़ में मौजूद नोड पर कर्सर घुमाएं. d3.js के लिए बधाई! नीले रंग के नोड, होस्ट नोड से आ रहे हैं. पीले रंग के नोड, शैडो डीओएम से आते हैं. <content> इंसर्शन पॉइंट, इन दोनों दुनिया के बीच का ब्रिज हैं. ये लॉजिकली शैडो DOM में होते हैं, इसलिए इन्हें पीले रंग में दिखाया जाता है. नीले बॉर्डर का मतलब है कि वे नीले होस्ट नोड को रेंडरिंग पार्टी में न्योता देते हैं.
शैडो DOM, Chrome 25 में उपलब्ध है और <template> एलिमेंट, Chrome 26 में उपलब्ध है. हालांकि, डेमो आज़माने के लिए, आपको सिर्फ़ पहले वर्शन की ज़रूरत है.