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