🏥 🔳 💞 छाया डोम 🚶🏼 👟 👩‍👧‍👦

मानक का संदर्भ: www.w3.org/TR/2013/WD-shadow-dom-20130514

तो वास्तव में छाया डोम क्या है:
शैडो DOM (या किसी डॉक्यूमेंट का शैडो मॉडल) - डॉक्यूमेंट का हिस्सा जो DOM ट्री में एनकैप्सुलेशन को लागू करता है। यह (छाया मॉडल) दस्तावेज़ का हिस्सा है और सीधे पृष्ठ के अंदर एम्बेडेड है।
छाया डोम की डिबगिंग को सरल बनाने के लिए, क्रोम में, आप वेब इंस्पेक्टर (सेटिंग्स - सामान्य - छाया डोम दिखाएं) में डिस्प्ले को सक्षम कर सकते हैं।

यह ध्यान दिया जाना चाहिए कि मानक में कार्यान्वित एनकैप्सुलेशन को कार्यात्मक कहा जाता है, क्योंकि छाया डोम दस्तावेज़ में एम्बेडेड है और इसके कई हिस्सों में से एक है जो एक-दूसरे से "स्वतंत्र रूप से (अधिक या कम स्वतंत्र रूप से) काम करते हैं। तदनुसार, कार्यान्वयन को डिजाइन करते समय, दस्तावेज़ ट्री में कार्यात्मक सीमाओं को स्थापित करने के लिए आवश्यक था ताकि किसी भी तरह के "स्वतंत्र" टुकड़ों के साथ काम किया जा सके। एन्कैप्सुलेशन की समस्या को हल करने के लिए, एक नया अमूर्त पेश किया गया था - छाया डोम, जो आपको एक ही मूल पेड़ के भीतर कई डोम पेड़ बनाने की अनुमति देता है और एक दस्तावेज विकसित किया गया था जो इसका वर्णन करता है।

चाइल्ड ट्री को पृष्ठ पर किसी तत्व के अंदर रखा गया है। मुख्य दस्तावेज़ पेड़ और छाया के बीच की कार्यात्मक सीमा को छाया सीमा कहा जाता है। छाया वृक्ष को होस्ट करने वाले तत्व को शैडो होस्ट कहा जाता है, और शैडो ट्री के मूल को क्रमशः शैडो रूट कहा जाता है।

प्रतिपादन के दौरान, छाया वृक्ष छाया होस्ट (तत्व) की सामग्री का स्थान लेता है।

क्रोमियम में उदाहरण कार्यान्वयन:

<div id="shadow-host"></div>

 var shadowHost = document.querySelector("#shadow-host"), shadowRoot = shadowHost.webkitCreateShadowRoot();

सम्मिलन अंक

इंसर्शन पॉइंट्स का इस्तेमाल शैडो होस्ट और शैडो ट्री के वंशजों की रचना के लिए किया जाता है। सम्मिलन बिंदु छाया वृक्ष में छाया मेजबान के वंशज का पता लगाते हैं। छाया वृक्ष का प्रतिपादन करते समय, वंशजों को इस स्थान पर प्रक्षेपित किया जाता है। वह तंत्र जो यह निर्धारित करता है कि छाया मेजबान के वंशज को सम्मिलन बिंदु में प्रक्षेपित किया जाएगा, वितरण कहलाता है।

कार्यान्वयन:

 <div id="shadow-host"> <span>Hi shadow DOM!</span> </div>

 var shadowHost = document.querySelector("#shadow-host"), shadowRoot = shadowHost.webkitCreateShadowRoot(), content = document.createElement("content"); content.select = "span"; //     shadow host shadowRoot.appendChild(content);

छद्म तत्व :: वितरित ()

:: वितरित (चयनकर्ता) - एक तर्क के रूप में एक रिश्तेदार चयनकर्ता लेने वाला एक कार्यात्मक छद्म तत्व। यह छाया वृक्ष में सम्मिलन बिंदु और सम्मिलन बिंदु तक ले जाने वाले तत्व के बीच संबंध का प्रतिनिधित्व करता है।

कार्यान्वयन (केवल क्रोम कैनरी):

 <html> <head> <script> function onLoad() { var shadowHost = document.querySelector("#shadow-host"), shadowRoot = shadowHost.webkitCreateShadowRoot(); shadowRoot.innerHTML = document.querySelector("template").innerHTML; } </script> </head> <body onload="onLoad()"> <div id="shadow-host"> <span>Hi shadow DOM!</span> </div> <template> <style> content::-webkit-distributed(span) { color: red !important; } </style> <content></content> </template> </body> </html>

एक छाया मेजबान में कई छाया पेड़ शामिल हो सकते हैं - उन्हें उस क्रम में प्रदर्शित किया जाएगा जो उन्हें जोड़ा गया था। पेड़ों के इस सेट को शैडो स्टैक कहा जाता है। पुराने शैडो ट्री को छाया प्रविष्टि बिंदु का उपयोग करके किसी अन्य छाया ट्री में भी स्थानांतरित किया जा सकता है।

 <html> <head> <script> function onLoad() { var shadowHost = document.querySelector("#shadow-host"), firstShadowRoot = shadowHost.webkitCreateShadowRoot(), secondShadowRoot = shadowHost.webkitCreateShadowRoot(); firstShadowRoot.innerHTML = document.querySelector("#template-1").innerHTML; secondShadowRoot.innerHTML = document.querySelector("#template-2").innerHTML; } </script> </head> <body onload="onLoad()"> <div id="shadow-host"> <span>Hi shadow DOM!</span> </div> <template id="template-1"> <div>root 1</div> </template> <template id="template-2"> <div>root 2</div> <shadow></shadow> </template> </body> </html>

पुनः प्रक्षेपण (पुनः प्रक्षेपण)

प्रतिक्षेपण एक ऐसी स्थिति है जिसमें पहले छाया के पेड़ में पहले से ही एक सम्मिलन बिंदु होता है, और दूसरे छाया वृक्ष में एक छाया विक्षेप बिंदु होता है, जबकि छाया मेजबान से ली गई सामग्री को पहले छाया वृक्ष में और फिर दूसरे में प्रक्षेपित किया जाता है।

 <html> <head> <script> function onLoad() { var shadowHost = document.querySelector("#shadow-host"), firstShadowRoot = shadowHost.webkitCreateShadowRoot(), secondShadowRoot = shadowHost.webkitCreateShadowRoot(); firstShadowRoot.innerHTML = document.querySelector("#template-1").innerHTML; secondShadowRoot.innerHTML = document.querySelector("#template-2").innerHTML; } </script> </head> <body onload="onLoad()"> <div id="shadow-host"> <span>Hi shadow DOM!</span> </div> <template id="template-1"> <div>root 1</div> <content select="span"></content> </template> <template id="template-2"> <div>root 2</div> <shadow></shadow> </template> </body> </html>

छद्म तत्व (छाया डोम के संदर्भ में)

मानक के लेखक लिखते हैं:

कुछ स्थितियों में, छाया वृक्ष का लेखक उस पेड़ से एक या एक से अधिक तत्वों को एक संरचनात्मक अमूर्त के रूप में नामित करना चाह सकता है जो छाया पेड़ की सामग्री के बारे में अतिरिक्त जानकारी प्रदान करता है।

कुछ स्थितियों में, छाया वृक्ष के लेखक छाया वृक्ष से एक या एक से अधिक तत्वों को एक संरचनात्मक अमूर्त के रूप में निर्दिष्ट करना चाहते हैं जो छाया वृक्ष की सामग्री के बारे में अतिरिक्त जानकारी प्रदान करते हैं।

मैं छाया तत्वों के बाहर सीएसएस चयनकर्ताओं को इसके अंदर के तत्वों तक पहुंचने की क्षमता के रूप में समझता हूं:

 <html> <head> <script> function onLoad() { var shadowHost = document.querySelector("#shadow-host"), shadowRoot = shadowHost.webkitCreateShadowRoot(); shadowRoot.innerHTML = document.querySelector("template").innerHTML; } </script> <style> div::x-thumb { width: 10px; height: 10px; background: black; } </style> </head> <body onload="onLoad()"> <div id="shadow-host"></div> <template> <div pseudo="x-thumb"></div> </template> </body> </html>

घटनाओं

कुछ घटनाओं को छाया सीमा से गुजारा जाता है, कुछ को नहीं। अपवाद उत्परिवर्तन घटनाएं हैं - वे छाया के पेड़ में बिल्कुल नहीं होनी चाहिए और, तदनुसार, छाया सीमा से गुजरती हैं। जब कोई घटना छाया सीमा से होकर गुज़रती है, तो उसका ईवेंट.टार्ग इनकैप्सुलेशन बनाए रखने के लिए बदल जाता है।
यहाँ एक दिलचस्प उदाहरण है:

 <html> <head> <script> function onLoad() { var shadowHost = document.querySelector("#shadow-host"), shadowRoot = shadowHost.webkitCreateShadowRoot(); shadowRoot.innerHTML = document.querySelector("template").innerHTML; shadowHost.addEventListener("mouseout", function(e) { console.log("mouse out", e.target); }); } </script> <style> #shadow-host { width: 100px; height: 100px; background: blue; } #outer-element { width: 100%; height: 20px; background: red; } </style> </head> <body onload="onLoad()"> <div id="shadow-host"> <div id="outer-element"></div> </div> <template> <div id="first-inner-element"></div> <div id="second-inner-element"></div> <content></content> <style> #first-inner-element { width: 100px; height: 20px; background: green; position: absolute; top: 140px; } #second-inner-element { width: 100px; height: 20px; background: black; margin-bottom: 40px; } </style> </template> </body> </html>

अनुमानित तत्व की घटनाएं छाया होस्ट में पॉप अप होती हैं, जैसे कि यह अभी भी सीधे छाया मेजबान के अंदर था। प्रथम-आंतरिक-तत्व ईवेंट छाया-होस्ट में पॉप-अप नहीं करते हैं, दूसरे-इनर-एलिमेंट के विपरीत, जो बिल्कुल छाया होस्ट (इवेंट.target बदल गया है) के बाहर स्थित और स्थानांतरित किया गया है।

शैलियों

छाया वृक्ष शैलियों में हेरफेर करने के दो तरीके हैं:

shadowRoot.resetStyleInheritance (डिफ़ॉल्ट रूप से गलत)
छाया पेड़ के लिए स्टाइल शैली विरासत (बाहर की ओर छाया पेड़ पर लागू नहीं होती है)।

shadowRoot.applyAuthorStyles (डिफ़ॉल्ट रूप से गलत)
लेखक की शैलियों (मुख्य) दस्तावेज़ को लागू करता है।

 <html> <head> <script> function onLoad() { var shadowHost = document.querySelector("#shadow-host"), firstShadowRoot = shadowHost.webkitCreateShadowRoot(); var secondShadowRoot = shadowHost.webkitCreateShadowRoot(); secondShadowRoot.resetStyleInheritance = true; secondShadowRoot.applyAuthorStyles = true; firstShadowRoot.innerHTML = document.querySelector("#template-1").innerHTML; secondShadowRoot.innerHTML = document.querySelector("#template-2").innerHTML; } </script> <style> * { font-style: italic; } </style> </head> <body onload="onLoad()"> <div id="shadow-host"></div> <template id="template-1"> <style> * { color: red; font-weight: bold; } </style> <div>root 1</div> </template> <template id="template-2"> <div>root 2</div> <shadow></shadow> </template> </body> </html>

परिणाम

हम कह सकते हैं कि html के लिए कुछ "एनकैप्सुलेशन" पर्याप्त नहीं था। यह पृष्ठ पर विभिन्न पूर्व-तैयार विगेट्स बनाने और उन्हें गति देने के महान अवसर खोलता है। केवल आश्चर्य विगेट्स के अंदर जावास्क्रिप्ट कोड के एनकैप्सुलेशन की कमी है, हालांकि यह मुझे बहुत तार्किक लगता है।