जेएस कैसे काम करता है: शैडो डोम टेक्नोलॉजी और वेब कंपोनेंट्स

आज, सब कुछ की विशेषताओं के लिए समर्पित सामग्रियों के 17 भागों के अनुवाद में, जो किसी तरह जावास्क्रिप्ट के साथ जुड़ा हुआ है, हम वेब घटकों और विभिन्न मानकों के बारे में बात करेंगे जो उनके साथ काम करने के उद्देश्य से हैं। शैडो डॉम तकनीक पर विशेष ध्यान दिया जाएगा।

सिंहावलोकन

वेब घटक एपीआई का एक परिवार है जिसका उपयोग नए डोम तत्वों को पुन: उपयोग के लिए उपयुक्त बनाने के लिए किया गया है। ऐसे तत्वों की कार्यक्षमता को बाकी कोड से अलग किया जाता है, उनका उपयोग हमारे स्वयं के डिजाइन के वेब अनुप्रयोगों में किया जा सकता है।

वेब घटकों से संबंधित चार प्रौद्योगिकियां हैं:

• शैडो डोम (शैडो डोम)
• HTML टेम्पलेट (HTML टेम्पलेट्स)
• कस्टम तत्व
• HTML आयात (HTML आयात)

इस लेख में, हम शैडो डोम तकनीक के बारे में बात करेंगे, जिसे घटक-आधारित अनुप्रयोग बनाने के लिए डिज़ाइन किया गया है। यह आम वेब विकास समस्याओं को हल करने के तरीके प्रदान करता है जो आपके पास पहले से मौजूद हैं:

• DOM आइसोलेशन: कंपोनेंट में एक पृथक DOM ट्री होता है (इसका मतलब है कि document.querySelector() कमांड घटक के शैडो DOM में नोड तक पहुंच की अनुमति नहीं देगा)। इसके अलावा, यह वेब अनुप्रयोगों में सीएसएस चयनकर्ता प्रणाली को सरल बनाता है, क्योंकि डोम घटक अलग-थलग हैं, जो डेवलपर को संभावित नाम संघर्षों के बारे में चिंता किए बिना एक ही सार्वभौमिक पहचानकर्ता और विभिन्न नामों में वर्ग नामों का उपयोग करने की अनुमति देता है।
• सीएसएस अलगाव: छाया डोम के अंदर वर्णित सीएसएस नियम इसके लिए सीमित हैं। ये शैलियाँ तत्व नहीं छोड़ती हैं, वे अन्य पृष्ठ शैलियों के साथ नहीं मिलती हैं।
• रचना: मार्कअप-आधारित घटकों के लिए एक घोषणात्मक एपीआई का विकास करना।

शैडो डोम टेक्नोलॉजी

यह मानता है कि आप पहले से ही DOM और संबंधित API की अवधारणा से परिचित हैं। यदि नहीं - आप पढ़ सकते हैं इस सामान।

शैडो डोम मूल रूप से एक नियमित DOM के समान है, लेकिन दो अंतरों के साथ:

• पहला यह है कि शैडो डोम कैसे बनाया और इस्तेमाल किया जाता है, विशेष रूप से, यह शेष पेज पर शैडो डोम के संबंध के बारे में है।
• दूसरा पेज के संबंध में शैडो डोम का व्यवहार है।

DOM के साथ काम करते समय, DOM नोड्स बनाए जाते हैं जो बच्चों के रूप में, पेज के अन्य तत्वों में शामिल होते हैं। शैडो डोम तकनीक के मामले में, एक अलग डोम ट्री बनाया जाता है जो तत्व से जुड़ता है, लेकिन इसे उसके सामान्य बाल तत्वों से अलग किया जाता है।

इस पृथक उप-प्रकार को छाया वृक्ष कहा जाता है। जिस तत्व से ऐसा पेड़ जुड़ा होता है उसे शैडो होस्ट कहा जाता है। सब कुछ जो DOM DOM के साथ छाया में जोड़ा जाता है, वह उस तत्व के लिए स्थानीय हो जाता है जिसमें वह संलग्न होता है, जिसमें <style> टैग का उपयोग करके वर्णित शैलियों को शामिल किया जाता है। इस तरह से शैडो डोम तकनीक के माध्यम से सीएसएस अलगाव प्रदान किया जाता है।

एक शैडो डोम बनाना

छाया जड़ दस्तावेज़ का एक टुकड़ा है जो मेजबान तत्व से जुड़ता है। एक तत्व एक छाया DOM प्राप्त करता है जब एक छाया रूट तत्व इसके साथ जुड़ा होता है। एक निश्चित तत्व के लिए एक शैडो DOM बनाने के लिए, आपको फॉर्म element.attachShadow() का उपयोग करने की आवश्यकता है:

 var header = document.createElement('header'); var shadowRoot = header.attachShadow({mode: 'open'}); shadowRoot.appendChild(document.createElement('<p> Shadow DOM </p>'); 

यह ध्यान दिया जाना चाहिए कि शैडो डोम स्पेसिफिकेशन में उन तत्वों की एक सूची है, जिनसे DOM शैडो सबट्रीज़ कनेक्ट नहीं किए जा सकते हैं।

शैडो डोम में रचना

रचना शैडो डोम की सबसे महत्वपूर्ण विशेषताओं में से एक है, यह वेब एप्लिकेशन बनाने का एक तरीका है जो HTML कोड लिखने की प्रक्रिया में उपयोग किया जाता है। इस प्रक्रिया के दौरान, प्रोग्रामर विभिन्न बिल्डिंग ब्लॉक्स (एलिमेंट्स) को जोड़ता है, जो पेज बनाते हैं, यदि आवश्यक हो तो उन्हें एक-दूसरे में घोंसला बनाते हैं। उदाहरण के लिए, ये ऐसे तत्व हैं जैसे <div> , <header> , <form> , और अन्य जो वेब एप्लिकेशन इंटरफेस बनाने के लिए उपयोग किए जाते हैं, जिनमें वे शामिल हैं जो अन्य तत्वों के लिए कंटेनर के रूप में कार्य करते हैं।

रचना तत्वों की क्षमता को निर्धारित करती है, जैसे कि <select> , <form> , <video> , अन्य HTML तत्वों को बच्चों के रूप में शामिल करने के लिए, और विभिन्न संरचनाओं से मिलकर ऐसे संरचनाओं के विशेष व्यवहार को व्यवस्थित करने की क्षमता।

उदाहरण के लिए, <select> एलिमेंट के पास ऐसी सूची के तत्वों की पूर्व निर्धारित सामग्री के साथ ड्रॉप-डाउन सूची के रूप में <option> तत्वों को रेंडर <option> लिए है।

तत्वों की रचना में प्रयुक्त शैडो डोम की कुछ विशेषताओं पर विचार करें।

हल्की डोम

लाइट डोम आपके घटक के उपयोगकर्ता द्वारा बनाया गया मार्कअप है। यह DOM कंपोनेंट के शैडो DOM के बाहर है और कंपोनेंट का एक बच्चा है। कल्पना करें कि आपने <better-button> नामक एक कस्टम घटक बनाया है जो मानक HTML <button> तत्व की क्षमताओं का विस्तार करता है, और उपयोगकर्ता को इस नए तत्व में एक छवि और कुछ पाठ जोड़ने की आवश्यकता है। यहाँ यह कैसा दिखता है:

 <extended-button> <!--  img  span -  Light DOM  extended-button --> <img align="center" src="boot.png" slot="image"> <span>Launch</span> </extended-button> 

<extended-button> तत्व प्रोग्रामर द्वारा वर्णित एक कस्टम घटक है, और इस घटक के अंदर HTML कोड इसकी लाइट डोम है - इस घटक के उपयोगकर्ता ने इसमें क्या जोड़ा है।

इस उदाहरण में छाया DOM <extended-button> घटक है। यह एक घटक का एक स्थानीय ऑब्जेक्ट मॉडल है जो सीएसएस की बाहरी दुनिया से अलग, इसकी आंतरिक संरचना का वर्णन करता है, और घटक के कार्यान्वयन के विवरण को एन्क्रिप्ट करता है।

चपटा डोम

चपटा डोम पेड़ दर्शाता है कि ब्राउज़र स्क्रीन पर घटक को कैसे प्रदर्शित करता है, लाइट डोम और शैडो डोम को मिलाकर। यह ऐसा DOM ट्री है जिसे डेवलपर टूल्स में देखा जा सकता है, और यह वह है जो पेज पर प्रदर्शित होता है। यह कुछ इस तरह दिख सकता है:

 <extended-button> #shadow-root <style>…</style> <slot name="image">   <img align="center" src="boot.png" slot="image"> </slot> <span id="container">   <slot>     <span>Launch</span>   </slot> </span> </extended-button> 

टेम्पलेट्स

यदि आपको लगातार वेब पेजों के HTML मार्कअप में समान संरचनाओं का उपयोग करना है, तो बार-बार एक ही कोड लिखने के बजाय एक निश्चित टेम्पलेट का उपयोग करना उपयोगी होगा। इस तरह से पहले संभव था, लेकिन अब सब कुछ बहुत सरल है एचटीएमएल टैग के उद्भव के लिए धन्यवाद <template> , जो आधुनिक ब्राउज़रों के लिए एक उत्कृष्ट समर्थन प्राप्त है। यह तत्व और इसकी सामग्री DOM में प्रदर्शित नहीं की गई है, लेकिन आप इसे जावास्क्रिप्ट से काम कर सकते हैं। एक साधारण उदाहरण पर विचार करें:

 <template id="my-paragraph"> <p> Paragraph content. </p> </template> 

यदि आप इस डिज़ाइन को पृष्ठ के HTML मार्कअप में शामिल करते हैं, तो इसके द्वारा वर्णित <p> टैग की सामग्री स्क्रीन पर तब तक दिखाई नहीं देगी, जब तक कि यह दस्तावेज़ के DOM से स्पष्ट रूप से जुड़ी न हो। उदाहरण के लिए, यह इस तरह दिख सकता है:

 var template = document.getElementById('my-paragraph'); var templateContent = template.content; document.body.appendChild(templateContent); 

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


आधुनिक ब्राउज़र के लिए HTML ब्राउज़र समर्थन

टेम्पलेट अपने आप में उपयोगी होते हैं, लेकिन कस्टम तत्वों के साथ उपयोग किए जाने पर उनकी क्षमताओं का पूरी तरह से खुलासा किया जाता है। कस्टम तत्व एक अलग सामग्री के लिए एक विषय है, और अब, यह समझने के लिए कि क्या हो रहा है, यह ध्यान में रखना पर्याप्त है कि customElement ब्राउज़र customElement प्रोग्रामर को अपने स्वयं के HTML टैग का वर्णन करने की अनुमति देता है और निर्दिष्ट करता है कि इन टैग के साथ बनाए गए तत्व स्क्रीन पर कैसे दिखेंगे।

एक वेब घटक को परिभाषित करें जो हमारे टेम्प्लेट को उसकी छाया DOM के लिए सामग्री के रूप में उपयोग करता है। इस नए तत्व को कॉल करें <my-paragraph> :

 customElements.define('my-paragraph', class extends HTMLElement {  constructor() {    super();    let template = document.getElementById('my-paragraph');    let templateContent = template.content;    const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(templateContent.cloneNode(true)); } }); 

ध्यान देने वाली सबसे महत्वपूर्ण बात यह है कि हमने छाया रूट में Node.cloneNode () विधि का उपयोग करके बनाई गई टेम्पलेट सामग्री का एक क्लोन संलग्न किया है।

चूंकि हम टेम्प्लेट की सामग्री को शैडो डोम से जोड़ते हैं, इसलिए हम <स्टाइल> एलीमेंट में टेम्प्लेट में कुछ स्टाइलिंग जानकारी शामिल कर सकते हैं, जो तब यूजर एलिमेंट में इनकैप्सुलेट हो जाएगा। यह पूरी योजना अपेक्षा के अनुरूप काम नहीं करेगी यदि आप शैडो डोम के बजाय नियमित DOM के साथ काम करते हैं।

उदाहरण के लिए, एक टेम्पलेट को इस प्रकार शैली की जानकारी शामिल करके संशोधित किया जा सकता है:

 <template id="my-paragraph"> <style>   p {     color: white;     background-color: #666;     padding: 5px;   } </style> <p>Paragraph content. </p> </template> 

अब हमारे द्वारा वर्णित उपयोगकर्ता तत्व को सामान्य वेब पृष्ठों पर निम्नानुसार उपयोग किया जा सकता है:

 <my-paragraph></my-paragraph> 

स्लॉट्स

HTML टेम्प्लेट में कई कमियां होती हैं, जिनमें से एक में मुख्य स्टैटिक मार्कअप होता है, जो अनुमति नहीं देता है, उदाहरण के लिए, कुछ वैरिएबल की सामग्री को उनकी मदद से प्रदर्शित करने के लिए उसी तरह से काम करना जिस तरह से वे मानक HTML के साथ काम करते हैं। टेम्पलेट्स। यह वह जगह है जहाँ <slot> टैग आता है।

स्लॉट्स को प्लेसहोल्डर के रूप में माना जा सकता है जो आपको टेम्पलेट में अपना स्वयं का HTML कोड शामिल करने की अनुमति देता है। यह आपको सार्वभौमिक HTML टेम्पलेट बनाने और फिर उन्हें स्लॉट्स जोड़कर अनुकूलन योग्य बनाने की अनुमति देता है।

इस बात पर एक नज़र डालें कि उपरोक्त <slot> का उपयोग कैसे करेंगे:

 <template id="my-paragraph"> <p>   <slot name="my-text">Default text</slot> </p> </template> 

यदि तत्व मार्कअप में शामिल होने पर स्लॉट की सामग्री निर्दिष्ट नहीं की जाती है, या यदि ब्राउज़र स्लॉट्स के साथ काम करने का समर्थन नहीं करता है, तो <my-paragraph> तत्व में केवल Default text की मानक सामग्री शामिल होगी।

स्लॉट की सामग्री को सेट करने के लिए, आपको <my-paragraph> तत्व में slot विशेषता के साथ HTML कोड शामिल करने की आवश्यकता है, जिसका मूल्य उस स्लॉट के नाम के बराबर है जिसमें आप इस कोड को रखना चाहते हैं।

पहले की तरह, कुछ भी हो सकता है। उदाहरण के लिए:

 <my-paragraph> <span slot="my-text">Let's have some different text!</span> </my-paragraph> 

आइटम है कि स्लॉट में रखा जा सकता है, कहा जाता है Slotable तत्व।

कृपया ध्यान दें कि पिछले उदाहरण में हमने स्लॉट में <span> तत्व जोड़ा है, यह तथाकथित स्लॉटेड तत्व है। इसमें एक slot विशेषता है जिसे मूल्य my-text असाइन किया गया है, my-text , वही मूल्य जो टेम्पलेट में वर्णित स्लॉट के name विशेषता में उपयोग किया जाता है।

उपरोक्त मार्कअप को संसाधित करने के बाद, ब्राउज़र निम्न चपटा डोम ट्री बनाएगा:

 <my-paragraph> #shadow-root <p>   <slot name="my-text">     <span slot="my-text">Let's have some different text!</span>   </slot> </p> </my-paragraph> 

तत्व #shadow-root । यह शैडो डोम के अस्तित्व का एक संकेतक है।

stylization

शैडो डोम तकनीक का उपयोग करने वाले घटकों को सामान्य आधार पर स्टाइल किया जा सकता है, वे अपनी स्वयं की शैलियों को परिभाषित कर सकते हैं, या कस्टम सीएसएस गुणों के रूप में हुक प्रदान कर सकते हैं जो घटक उपयोगकर्ताओं को डिफ़ॉल्ट शैलियों को ओवरराइड करने की अनुमति देते हैं।

In घटकों में वर्णित शैलियाँ

सीएसएस अलगाव शैडो डोम तकनीक की सबसे उल्लेखनीय विशेषताओं में से एक है। अर्थात्, हम निम्नलिखित के बारे में बात कर रहे हैं:

• पृष्ठ के सीएसएस चयनकर्ता जिस पर संबंधित घटक रखा गया है, उसके अंदर क्या है इसे प्रभावित नहीं करता है।
• घटक के भीतर वर्णित शैलियाँ पृष्ठ को प्रभावित नहीं करती हैं। वे मेजबान तत्व में अलग-थलग हैं।

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

#shadow-root तत्व पर एक नज़र डालें, जो कुछ शैलियों को परिभाषित करता है:

 #shadow-root <style> #container {   background: white; } #container-items {   display: inline-flex; } </style> <div id="container"></div> <div id="container-items"></div> 

उपरोक्त सभी शैलियाँ स्थानीय #shadow-root ।

इसके अलावा, आप #shadow-root में बाहरी स्टाइल शीट को शामिल करने के लिए <link> टैग का उपयोग कर सकते हैं। ऐसी शैलियाँ स्थानीय भी होंगी।

▍Pseudoclass: मेजबान

:host छद्म :host आपको एक तत्व तक पहुँचने की अनुमति देता है जिसमें एक छाया DOM ट्री और इस तत्व की शैली है:

 <style> :host {   display: block; /*       display: inline */ } </style> 

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

छद्म वर्ग का कार्यात्मक रूप :: :host(<selector>) , आपको होस्ट तत्व तक पहुंचने की अनुमति देता है यदि यह निर्दिष्ट <selector> तत्व से मेल खाता है। यह एक शानदार तरीका है कि घटकों को उस व्यवहार को एनकैप्सुलेट करने की अनुमति देता है जो उपयोगकर्ता की क्रियाओं या घटक की स्थिति में परिवर्तन का जवाब देता है, और आपको मेजबान घटक के आधार पर आंतरिक नोड्स को स्टाइल करने की अनुमति देता है:

 <style> :host {   opacity: 0.4; } :host(:hover) {   opacity: 1; } :host([disabled]) { /*      -  disabled. */   background: grey;   pointer-events: none;   opacity: 0.4; } :host(.pink) > #tabs {   color: pink; /*     #tabs   -  class="pink". */ } </style> 

-टाइपिक्स और एक छद्म वर्ग के साथ तत्व: मेजबान-संदर्भ (<चयनकर्ता>)

:host-context(<selector>) छद्म- :host-context(<selector>) मेजबान तत्व से मेल खाता है यदि यह या इसका कोई पूर्वज निर्दिष्ट <selector> तत्व से मेल खाता है।

इस सुविधा का एक सामान्य उपयोग मामला थीम वाले तत्वों को स्टाइल करने के लिए है। उदाहरण के लिए, अक्सर विषयों का उपयोग <html> या <body> टैग्स के लिए उपयुक्त क्लास असाइन करके किया जाता है:

 <body class="lightheme"> <custom-container> … </custom-container> </body> 

:host-context(.lightheme) छद्म- :host-context(.lightheme) <fancy-tabs> लागू होगा यदि यह तत्व .lightteme वंशज है:

 :host-context(.lightheme) { color: black; background: white; } 

:host-context() थीम को लागू करने के लिए :host-context() निर्माण उपयोगी हो सकता है, लेकिन इस उद्देश्य के लिए कस्टम सीएसएस गुणों का उपयोग करके हुक का उपयोग करना बेहतर है।

▍ बाहर से घटक के मेजबान तत्व को स्टाइल करना

घटक के होस्ट तत्व को चयनकर्ता के रूप में इसके टैग के नाम का उपयोग करके बाहरी रूप से स्टाइल किया जा सकता है:

 custom-container { color: red; } 

बाहरी शैली छाया डोम में परिभाषित शैलियों पर पूर्वता लेती हैं।
मान लीजिए कि एक उपयोगकर्ता निम्नलिखित चयनकर्ता बनाता है:

 custom-container { width: 500px; } 

यह घटक में परिभाषित नियम को ही ओवरराइड करेगा:

 :host { width: 300px; } 

इस दृष्टिकोण का उपयोग करके, आप केवल घटक को ही स्टाइल कर सकते हैं। किसी घटक की आंतरिक संरचना को कैसे स्टाइल करें? कस्टम सीएसएस गुण इस उद्देश्य के लिए उपयोग किए जाते हैं।

कस्टम सीएसएस गुणों का उपयोग कर स्टाइल हुक लगाना

उपयोगकर्ता घटक की आंतरिक संरचनाओं की शैलियों को अनुकूलित कर सकते हैं यदि घटक का लेखक उन्हें कस्टम सीएसएस गुणों का उपयोग करके स्टाइल हुक प्रदान करता है।

यह दृष्टिकोण <slot> टैग के साथ काम करते समय उपयोग किए जाने वाले तंत्र के समान है, लेकिन यह इस मामले में, शैलियों पर लागू होता है।

एक उदाहरण पर विचार करें:

 <!-- main page --> <style> custom-container {   margin-bottom: 60px;    - custom-container-bg: black; } </style> <custom-container background>…</custom-container> 

यहाँ छाया डोम पेड़ के अंदर क्या है:

 :host([background]) { background: var( - custom-container-bg, #CECECE); border-radius: 10px; padding: 10px; } 

इस मामले में, घटक पृष्ठभूमि के रंग के रूप में काले रंग का उपयोग करता है, क्योंकि यह उपयोगकर्ता था जिसने इसे निर्दिष्ट किया था। अन्यथा, पृष्ठभूमि का रंग #CECECE होगा।

घटक के लेखक के रूप में, आप अपने उपयोगकर्ताओं को यह बताने के लिए जिम्मेदार हैं कि कौन से विशिष्ट सीएसएस गुण वे उपयोग कर सकते हैं। अपने घटक के खुले इंटरफ़ेस के इस भाग पर विचार करें।

स्लॉट के साथ काम करने के लिए जावास्क्रिप्ट एपीआई

शैडो DOM API स्लॉट हैंडलिंग क्षमताओं को प्रदान करता है।

▍Event खांचा बदलना

स्लॉट बदलने की स्थिति में नोड्स को रखा जाता है, जब स्लॉट में बदलाव किया जाता है। उदाहरण के लिए, यदि कोई उपयोगकर्ता लाइट डोम में चाइल्ड नोड जोड़ता है या हटाता है:

 var slot = this.shadowRoot.querySelector('#some_slot'); slot.addEventListener('slotchange', function(e) { console.log('Light DOM change'); }); 

लाइट डोम में अन्य प्रकार के परिवर्तनों को ट्रैक करने के लिए, आप तत्व के निर्माता में MutationObserver का उपयोग कर सकते हैं। इसके बारे में यहाँ और पढ़ें।

▍ विधि नियत पद ()

यदि आप यह जानना चाहते हैं कि स्लॉट के साथ कौन से तत्व जुड़े हैं, तो assignedNodes() विधि उपयोगी हो सकती है। slot.assignedNodes() कॉल करना। slot.assignedNodes() गया slot.assignedNodes() विधि आपको यह पता लगाने की अनुमति देती है कि स्लॉट द्वारा कौन से तत्व प्रदर्शित किए गए हैं। {flatten: true} विकल्प का उपयोग करने से आप स्लॉट की मानक सामग्री प्राप्त कर सकते हैं (यह प्रदर्शित होता है कि इसमें कोई नोड्स संलग्न नहीं थे)।

एक उदाहरण पर विचार करें:

 <slot name='slot1'><p>Default content</p></slot> 

कल्पना करें कि यह स्लॉट <my-container> घटक में स्थित है।

आइए इस घटक के लिए विभिन्न उपयोगों पर एक नज़र डालें, और जब assignedNodes() विधि कहा जाता है तो क्या लौटाया जाएगा।

पहले मामले में, हम स्लॉट में अपनी सामग्री जोड़ते हैं:

 <my-container> <span slot="slot1"> container text </span> </my-container> 

इस स्थिति में, assignedNodes() कॉल वापस आएगा [ container text ] । ध्यान दें कि यह मान नोड्स की एक सरणी है।

दूसरे मामले में, हम अपनी सामग्री के साथ स्लॉट नहीं भरते हैं:

 <my-container> </my-container> 

assignedNodes() कॉल एक खाली सरणी लौटाएगा - [] ।

अगर, हालांकि, विधि पैरामीटर के पास {flatten: true} , एक ही तत्व के लिए उसका फोन इसकी सामग्री दे देंगे, जबकि यह डिफ़ॉल्ट रूप से प्रदर्शित होता है: [ Default content ]

[ Default content ]

[ Default content ] ।

इसके अलावा, स्लॉट के अंदर एक तत्व का उपयोग करने के लिए, आप assignedNodes() को कॉल कर सकते हैं ताकि आपको पता चल सके कि आपका तत्व किस घटक स्लॉट को सौंपा गया है।

इवेंट मॉडल

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

यहां उन घटनाओं की एक सूची दी गई है जो डोम शैडो ट्री से पारित की जाती हैं (यह व्यवहार कुछ घटनाओं की विशेषता नहीं है):

• फोकस इवेंट्स: blur , focus , focusout , focusout ।
• माउस घटनाएँ: click , dblclick , mousedown , mouseenter , mousemove और अन्य।
• पहिया घटनाएँ: wheel ।
• इनपुट घटनाएँ: beforeinput , input ।
• कीबोर्ड इवेंट्स: keyup , की- keyup ।
• रचना की घटनाएं: compositionstart , compositionupdate , compositionend , compositionend ।
• ड्रैग इवेंट्स: dragend , drag , dragend , drop आदि।

कस्टम ईवेंट

डिफ़ॉल्ट रूप से उपयोगकर्ता ईवेंट DOM शैडो ट्री नहीं छोड़ता है। यदि आप किसी ईवेंट को ट्रिगर करना चाहते हैं, और आप चाहते हैं कि यह शैडो DOM को छोड़ दे, तो आपको इसे पैरामीटर bubbles: true प्रदान करने की आवश्यकता है bubbles: true और composed: true । यहां एक समान घटना की चुनौती दी गई है:

 var container = this.shadowRoot.querySelector('#container'); container.dispatchEvent(new Event('containerchanged', {bubbles: true, composed: true})); 

शैडो डोम ब्राउज़र के लिए समर्थन

यह पता लगाने के लिए कि क्या ब्राउज़र शैडो डोम तकनीक का समर्थन करता है, आप attachShadow की उपस्थिति की जाँच कर सकते हैं:

 const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow; 

इस जानकारी पर है कि विभिन्न ब्राउज़र इस तकनीक का समर्थन कैसे करते हैं।


ब्राउज़रों में शैडो डोम तकनीक का समर्थन

परिणाम

छाया DOM ट्री नियमित DOM ट्री की तरह व्यवहार नहीं करता है। विशेष रूप से, इस सामग्री के लेखक के अनुसार, SessionStack लाइब्रेरी में यह DOM परिवर्तनों पर नज़र रखने के लिए प्रक्रिया की जटिलता में व्यक्त किया गया है, जिसके बारे में जानकारी जो पृष्ठ के साथ हुई थी, उसे पुन: उत्पन्न करने के लिए आवश्यक है। अर्थात्, MutationObserver उपयोग परिवर्तनों को ट्रैक करने के लिए किया जाता है। इस मामले में, छाया डोम पेड़ नहीं की घटनाओं का कारण होता है MutationObserver वैश्विक क्षेत्र में की जरूरत के लिए अग्रणी विशिष्ट घटक है कि छाया डोम का उपयोग के साथ काम करने के लिए दृष्टिकोण के लिए,।

अभ्यास से पता चलता है कि अधिक से अधिक आधुनिक वेब एप्लिकेशन शैडो डोम का उपयोग करते हैं, जो बताता है कि इस तकनीक के और विकसित होने और वितरित होने की संभावना है।

प्रिय पाठकों! क्या आप शैडो डोम तकनीक पर आधारित वेब घटकों का उपयोग करते हैं?