Google Chrome के डेवलपर टूल में, मुझे टैग के #shadow-rootनीचे एक राइट दिखाई देता है <html lang="en">। यह क्या करता है और इसका क्या उपयोग किया जाता है? मैं इसे फ़ायरफ़ॉक्स में नहीं देखता और न ही IE में; केवल क्रोम में, क्या यह एक विशेष विशेषता है?
अगर मैं इसे खोलता हूं, तो यह दिखाता है <head>और <body>नाम के बगल में एक लिंक है reveal, जिसे क्लिक करके, यह <head>और <body>कुछ नहीं, इंगित करता है।
जवाबों:
यह एक विशेष संकेतक है जो एक शैडो डोम मौजूद है। ये वर्षों से मौजूद हैं, लेकिन डेवलपर्स को हाल ही में कभी भी इसमें एपीआई नहीं दिए गए हैं। क्रोम में कुछ समय के लिए यह कार्यक्षमता रही है, अन्य ब्राउज़र अभी भी पकड़ रहे हैं। इसे "एलीमेंट्स" सेक्शन के तहत DevTools सेटिंग्स में टॉगल किया जा सकता है। "उपयोगकर्ता एजेंट छाया डोम दिखाएं" को अनचेक करें। यह कम से कम आंतरिक रूप से बनाए गए किसी भी शैडो डोम को छिपा देगा (जैसे चुनिंदा तत्व।) मैं अभी अनिश्चित हूं यदि यह उपयोगकर्ता-निर्मित लोगों को प्रभावित करता है, जैसे कि कस्टम तत्व।
ये इफ्रेम्स जैसी चीजों में भी आते हैं, जहां आपके पास एक अलग डोम ट्री होता है जो दूसरे के अंदर होता है।
शैडो डोम केवल यह कह रहा है कि पृष्ठ का कुछ हिस्सा, इसके भीतर अपना स्वयं का DOM है। उस तत्व के भीतर शैलियाँ और स्क्रिप्टिंग को स्कोप किया जा सकता है, इसलिए इसमें जो चलता है वह केवल उस सीमा में चलता है।
यह वेब घटक के काम करने के लिए आवश्यक प्राथमिक टुकड़ों में से एक है । जो एक नई तकनीक है जिससे डेवलपर्स अपने स्वयं के इनकैप्सुलेटेड घटकों का निर्माण कर सकते हैं जो डेवलपर्स किसी अन्य एचटीएमएल तत्व की तरह ही उपयोग कर सकते हैं।
शैडो डोम के एक उदाहरण के रूप में, जब आपके पास एक <video>वेब पेज पर एक टैग होता है, तो इसे मुख्य DOM में सिर्फ एक टैग के रूप में दिखाया जाता है, लेकिन यदि आप शैडो DOM को सक्षम करते हैं, तो आप वीडियो प्लेयर का HTML (प्लेयर DOM) देख पाएंगे।
इस लेख में इसे स्पष्ट रूप से समझाया गया है, http://webcompenders.org/articles/introduction-to-shadow-dom/
वेब घटकों के मामले में, एक मूलभूत समस्या है जो HTML और जावास्क्रिप्ट के उपयोग से निर्मित विगेट्स को उपयोग में कठिन बनाता है।
समस्या : एक विजेट के अंदर DOM पेड़ बाकी पेज से अलग नहीं है। इनकैप्सुलेशन की कमी का मतलब है कि आपका दस्तावेज़ स्टाइलशीट गलती से विजेट के अंदर के हिस्सों पर लागू हो सकता है; आपका जावास्क्रिप्ट गलती से विजेट के अंदर भागों को संशोधित कर सकता है; विजेट के अंदर आईडी के साथ आपकी आईडी ओवरलैप हो सकती है।
शैडो DOM DOM ट्री एनकैप्सुलेशन समस्या को संबोधित करता है ।
उदाहरण के लिए, यदि आपके पास इस तरह का मार्कअप था:
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
इसके बजाय
Hello, world!आपका पृष्ठ जैसा दिखता है
こんにちは、影の世界!इतना ही नहीं, अगर पृष्ठ पर मौजूद जावास्क्रिप्ट पूछती है कि बटन का टेक्स्ट कॉन्टेंट क्या है, तो यह नहीं मिलेगा “こんにちは、影の世界!”, लेकिन “Hello, world!” क्योंकि छाया रूट के तहत DOM सबट्री का एनकैप्सुलेट किया गया है ।
ध्यान दें : मैंने https://www.html5rocks.com/en/tutorials/webcompenders/shadowdom/ से ऊपर की सामग्री को उठाया है क्योंकि इसने मुझे पहले से ही यहां के उत्तर की तुलना में छाया डोम को थोड़ा बेहतर समझने में मदद की। मैंने यहां प्रासंगिक सामग्री जोड़ी है ताकि यह दूसरों की मदद करे, लेकिन उसी पर विस्तृत चर्चा के लिए लिंक पर एक नज़र डालें।