जेएस कैसे काम करता है: कस्टम तत्व

हम आपके ध्यान में जावास्क्रिप्ट पारिस्थितिकी तंत्र के विभिन्न तंत्रों की विशेषताओं पर सामग्री के सत्रस्टैक श्रृंखला से 19 लेखों का अनुवाद प्रस्तुत करते हैं। आज हम कस्टम तत्वों के मानक के बारे में बात करेंगे - तथाकथित "कस्टम तत्व"। हम इस बारे में बात करेंगे कि वे किन कार्यों को हल करने की अनुमति देते हैं, और उन्हें कैसे बनाते हैं और उनका उपयोग कैसे करते हैं।

सिंहावलोकन

इस श्रृंखला के पिछले लेखों में से एक में, हमने शैडो डोम और कुछ अन्य तकनीकों के बारे में बात की है जो एक बड़ी घटना का हिस्सा हैं - वेब घटक। वेब घटकों को कॉम्पैक्ट, मॉड्यूलर और पुन: प्रयोज्य तत्वों के द्वारा HTML की मानक विशेषताओं का विस्तार करने के लिए डेवलपर्स को सक्षम करने के लिए डिज़ाइन किया गया है। यह अपेक्षाकृत नया W3C मानक है जो सभी अग्रणी ब्राउज़रों के निर्माताओं ने पहले ही देखा है। वह उत्पादन में पाया जा सकता है, हालांकि, निश्चित रूप से, जबकि उसका काम पॉलीफ़ाइल्स द्वारा प्रदान किया जाता है (हम उनके बारे में बाद में बात करेंगे)।

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

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

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

एपीआई

जारी रखने से पहले, आइए देखें कि एपीआई हमें कस्टम तत्वों के साथ काम करने के लिए क्या अवसर प्रदान करता है। अर्थात्, हम एक वैश्विक customElements ऑब्जेक्ट्स के बारे में बात कर रहे हैं जिसमें कई विधियाँ हैं:

• define(tagName, constructor, options) विधि define(tagName, constructor, options) आपको एक नए उपयोगकर्ता तत्व को परिभाषित करने (बनाने, रजिस्टर करने define(tagName, constructor, options) अनुमति देता है। यह तीन तर्क लेता है - उपयोगकर्ता तत्व के लिए टैग नाम, ऐसे तत्वों के नामकरण नियमों के अनुसार, एक वर्ग की घोषणा, और मापदंडों के साथ एक वस्तु। वर्तमान में, केवल एक पैरामीटर समर्थित है - extends , जो एक स्ट्रिंग है जो विस्तार करने के लिए इनलाइन तत्व का नाम निर्दिष्ट करता है। इस सुविधा का उपयोग मानक तत्वों के विशेष संस्करण बनाने के लिए किया जाता है।
• get(tagName) विधि उपयोगकर्ता तत्व के निर्माता को वापस कर देती है, बशर्ते कि यह तत्व पहले से ही परिभाषित हो, अन्यथा यह undefined । यह एक तर्क लेता है - उपयोगकर्ता तत्व का नाम टैग।
• जब whenDefined(tagName) विधि उपयोगकर्ता तत्व को बनाने के बाद हल किए गए वादे को वापस करती है। यदि कोई तत्व पहले से ही परिभाषित है, तो यह वादा तुरंत हल हो जाता है। एक वादा अस्वीकार कर दिया जाता है यदि टैग नाम इसके पास गया उपयोगकर्ता तत्व के लिए एक वैध टैग नाम नहीं है। यह विधि उपयोगकर्ता तत्व के टैग नाम को स्वीकार करती है।

कस्टम आइटम बनाएँ

कस्टम तत्व बनाना बहुत सरल है। ऐसा करने के लिए, दो काम करने होंगे: तत्व के लिए एक वर्ग घोषणा बनाएं जो HTMLElement वर्ग का विस्तार करना चाहिए और चयनित नाम के तहत इस तत्व को पंजीकृत करना चाहिए। यहाँ यह कैसा दिखता है:

 class MyCustomElement extends HTMLElement { constructor() {   super();   // … } // … } customElements.define('my-custom-element', MyCustomElement); 

यदि आप वर्तमान क्षेत्र को प्रदूषित नहीं करना चाहते हैं, तो आप एक अनाम वर्ग का उपयोग कर सकते हैं:

 customElements.define('my-custom-element', class extends HTMLElement { constructor() {   super();   // … } // … }); 

जैसा कि आप उदाहरणों से देख सकते हैं, उपयोगकर्ता तत्व customElements.define(...) विधि का उपयोग करके पंजीकृत है customElements.define(...) पहले से परिचित है।

समस्याएँ जो कस्टम तत्व हल करते हैं

आइए उन समस्याओं के बारे में बात करते हैं जो हमें कस्टम तत्वों को हल करने की अनुमति देते हैं। उनमें से एक कोड की संरचना में सुधार करना है और जिसे "div टैग सूप" (div सूप) कहा जाता है, को खत्म करना है। यह घटना आधुनिक वेब अनुप्रयोगों में एक बहुत ही सामान्य कोड संरचना है, जिसमें एक दूसरे में कई div तत्व अंतर्निहित हैं। यहाँ यह है कि यह कैसा दिख सकता है:

 <div class="top-container"> <div class="middle-container">   <div class="inside-container">     <div class="inside-inside-container">       <div class="are-we-really-doing-this">         <div class="mariana-trench">           …         </div>       </div>     </div>   </div> </div> </div> 

ऐसे HTML- कोड का उपयोग उचित कारणों के लिए किया जाता है - यह पृष्ठ के लेआउट का वर्णन करता है और स्क्रीन पर इसका सही प्रदर्शन सुनिश्चित करता है। हालाँकि, यह HTML कोड की पठनीयता को बाधित करता है और इसके रखरखाव को जटिल बनाता है।

मान लीजिए कि हमारे पास एक घटक है जो निम्न आकृति जैसा दिखता है।


घटक उपस्थिति

ऐसी चीजों का वर्णन करने के लिए पारंपरिक दृष्टिकोण का उपयोग करते हुए, निम्न कोड इस घटक के अनुरूप होगा:

 <div class="primary-toolbar toolbar"> <div class="toolbar">   <div class="toolbar-button">     <div class="toolbar-button-outer-box">       <div class="toolbar-button-inner-box">         <div class="icon">           <div class="icon-undo"> </div>         </div>       </div>     </div>   </div>   <div class="toolbar-button">     <div class="toolbar-button-outer-box">       <div class="toolbar-button-inner-box">         <div class="icon">           <div class="icon-redo"> </div>         </div>       </div>     </div>   </div>   <div class="toolbar-button">     <div class="toolbar-button-outer-box">       <div class="toolbar-button-inner-box">         <div class="icon">           <div class="icon-print"> </div>         </div>       </div>     </div>   </div>   <div class="toolbar-toggle-button toolbar-button">     <div class="toolbar-button-outer-box">       <div class="toolbar-button-inner-box">         <div class="icon">           <div class="icon-paint-format"> </div>         </div>       </div>     </div>   </div> </div> </div> 

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

 <primary-toolbar> <toolbar-group>   <toolbar-button class="icon-undo"></toolbar-button>   <toolbar-button class="icon-redo"></toolbar-button>   <toolbar-button class="icon-print"></toolbar-button>   <toolbar-toggle-button class="icon-paint-format"></toolbar-toggle-button> </toolbar-group> </primary-toolbar> 

मुझे यकीन है कि हर कोई इस बात से सहमत होगा कि दूसरा कोड टुकड़ा बहुत बेहतर लग रहा है। इस तरह के कोड को पढ़ना आसान है, बनाए रखने में आसान है, और डेवलपर और ब्राउज़र दोनों के लिए समझ में आता है। यह सब इस तथ्य से नीचे आता है कि यह एक से अधिक सरल है जिसमें कई नेस्टेड div टैग हैं।

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

 <div class="my-custom-element"> <input type="text" class="email" /> <button class="submit"></button> </div> 

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

यह बहुत अच्छा होगा यदि हम जहाँ इस तत्व की आवश्यकता है, बस निम्नलिखित लिख सकते हैं:

 <my-custom-element></my-custom-element> 

हालांकि, आधुनिक वेब एप्लिकेशन स्थिर HTML से बहुत अधिक हैं। वे इंटरैक्टिव हैं। उनकी अन्तरक्रियाशीलता का स्रोत जावास्क्रिप्ट है। आमतौर पर, ऐसी क्षमताओं को प्रदान करने के लिए, कुछ तत्व बनाए जाते हैं, फिर ईवेंट श्रोता उनसे जुड़े होते हैं, जो उन्हें उपयोगकर्ता प्रभावों पर प्रतिक्रिया देने की अनुमति देता है। उदाहरण के लिए, वे क्लिकों पर प्रतिक्रिया दे सकते हैं, उनके ऊपर माउस पॉइंटर के "होवरिंग" करने के लिए, उन्हें स्क्रीन के चारों ओर घसीटने के लिए, और इसी तरह। यहां एक घटना श्रोता को उस तत्व से कैसे जोड़ा जाए जो माउस से क्लिक करने पर होता है:

 var myDiv = document.querySelector('.my-custom-element'); myDiv.addEventListener('click', _ => { myDiv.innerHTML = '<b> I have been clicked </b>'; }); 

और यहाँ इस तत्व के लिए HTML कोड है:

 <div class="my-custom-element"> I have not been clicked yet. </div> 

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

 class MyCustomElement extends HTMLElement { constructor() {   super();   var self = this;   self.addEventListener('click', _ => {     self.innerHTML = '<b> I have been clicked </b>';   }); } } customElements.define('my-custom-element', MyCustomElement); 

और यहाँ पृष्ठ के HTML कोड में यह दिखता है:

 <my-custom-element> I have not been clicked yet </my-custom-element> 

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

परिणामस्वरूप, यदि हम इस खंड को संक्षेप में प्रस्तुत करते हैं, तो हम कह सकते हैं कि उपयोगकर्ता तत्व कोड को स्पष्ट करते हैं, इसके समर्थन को सरल करते हैं, इसे छोटे मॉड्यूल में तोड़ने में मदद करते हैं जिसमें सभी आवश्यक कार्यक्षमता शामिल होती हैं और पुन: उपयोग के लिए उपयुक्त होती हैं।

अब जब हमने कस्टम तत्वों के साथ काम करने के सामान्य मुद्दों पर चर्चा की है, तो आइए उनकी विशेषताओं के बारे में बात करते हैं।

आवश्यकताओं

इससे पहले कि आप अपने स्वयं के कस्टम तत्वों को विकसित करना शुरू करें, आपको कुछ नियमों के बारे में पता होना चाहिए जिन्हें बनाते समय आपको उनका पालन करना चाहिए। यहाँ वे हैं:

• घटक नाम में एक हाइफ़न ( - प्रतीक) शामिल होना चाहिए। इसके लिए धन्यवाद, HTML पार्सर एम्बेडेड और उपयोगकर्ता तत्वों के बीच अंतर कर सकता है। इसके अलावा, यह दृष्टिकोण यह सुनिश्चित करता है कि अंतर्निहित तत्वों के साथ नामों की कोई टक्कर नहीं है (उन दोनों के साथ जो अभी हैं और भविष्य में दिखाई देंगे)। उदाहरण के लिए, कस्टम तत्व का वास्तविक नाम >my-custom-element< , और नाम >myCustomElement< और <my_custom_element> उपयुक्त नहीं हैं।
• एक ही टैग को एक से अधिक बार पंजीकृत करना निषिद्ध है। ऐसा करने का प्रयास करने से ब्राउज़र को DOMException त्रुटि DOMException कारण होगा। कस्टम तत्वों को फिर से परिभाषित नहीं किया जा सकता है।
• कस्टम टैग स्व-समापन नहीं हो सकते। HTML पार्सर केवल मानक स्व-समापन टैग के सीमित सेट का समर्थन करता है (उदाहरण के लिए, <img> , <link> , <br> )।

संभावनाएं

चलो बात करते हैं कि आप कस्टम तत्वों के साथ क्या कर सकते हैं। यदि आप इस प्रश्न का संक्षेप में उत्तर देते हैं, तो यह पता चलता है कि आप उनके साथ बहुत सी रोचक बातें कर सकते हैं।

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

 class MyCustomElement extends HTMLElement { // ... constructor() {   super();   this.addEventListener('mouseover', _ => {     console.log('I have been hovered');   }); } // ... } 

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

ऐसे कई तरीके हैं जो आपको किसी तत्व के जीवन चक्र में कुछ बिंदुओं पर कोड निष्पादित करने की अनुमति देते हैं।

• constructor विधि को एक बार कहा जाता है, जब तत्व को बनाते या "अपग्रेड" करते हैं (हम इस बारे में नीचे बात करेंगे)। अक्सर इसका इस्तेमाल किसी तत्व की स्थिति को इनिशियलाइज़ करने के लिए किया जाता है, जिससे इवेंट श्रोताओं को जोड़ा जा सके, एक शैडो डोम बनाया जा सके, इत्यादि। यह मत भूलो कि आपको हमेशा निर्माता में super() कॉल करने की आवश्यकता है।
• connectedCallback विधि को हर बार एक तत्व DOM में जोड़े जाने के लिए कहा जाता है। इसका उपयोग तब किया जा सकता है (और यह ठीक उसी तरह से इसका उपयोग करने की अनुशंसा की जाती है) किसी भी क्रिया के निष्पादन को स्थगित करने के लिए जब तक कि पृष्ठ पर तत्व दिखाई नहीं देता (उदाहरण के लिए, इस तरह से आप कुछ डेटा लोड करने में देरी कर सकते हैं)।
• जब किसी आइटम को DOM से निकाला जाता है तो disconnectedCallback विधि को कहा जाता है। यह आमतौर पर संसाधनों को मुक्त करने के लिए उपयोग किया जाता है। ध्यान दें कि यदि उपयोगकर्ता पृष्ठ के साथ ब्राउज़र टैब को बंद करता है तो यह विधि नहीं कहलाती है। इसलिए, कुछ विशेष महत्वपूर्ण कार्य करने के लिए आवश्यक होने पर उस पर भरोसा न करें।
• एक तत्व attributeChangedCallback को जोड़ने, हटाने, अद्यतन करने या प्रतिस्थापित करने के बाद attributeChangedCallback विधि को कहा जाता है। इसके अलावा, यह तब कहा जाता है जब तत्व पार्सर द्वारा बनाया जाता है। हालाँकि, ध्यान दें कि यह विधि केवल उन विशेषताओं पर लागू होती है जो observedAttributes गुण में सूचीबद्ध हैं।
• adoptedCallback अपनाया जाता है, जब document.adoptNode(...) adoptedCallback document.adoptNode(...) विधि का उपयोग किया जाता है, जिसका उपयोग नोड को किसी अन्य दस्तावेज़ में ले जाने के लिए किया जाता है।

कृपया ध्यान दें कि उपरोक्त सभी विधियाँ समकालिक हैं। उदाहरण के लिए, connectedCallback गए connectedCallback विधि को DOM में तत्व जोड़ने के तुरंत बाद कहा जाता है, और बाकी प्रोग्राम इस विधि के पूरा होने का इंतजार करता है।

संपत्ति परावर्तन

एम्बेडेड HTML तत्वों में एक बहुत ही सुविधाजनक विशेषता है: संपत्ति प्रतिबिंब। इस तंत्र के लिए धन्यवाद, गुणों के रूप में कुछ गुणों के मूल्यों को सीधे DOM में परिलक्षित किया जाता है। मान लीजिए कि यह id प्रॉपर्टी की विशेषता है। उदाहरण के लिए, हम निम्नलिखित ऑपरेशन करते हैं:

 myDiv.id = 'new-id'; 

प्रासंगिक परिवर्तन DOM को प्रभावित करेंगे:

 <div id="new-id"> ... </div> 

यह तंत्र विपरीत दिशा में संचालित होता है। यह बहुत उपयोगी है क्योंकि यह आपको घोषित रूप से तत्वों को कॉन्फ़िगर करने की अनुमति देता है।

कस्टम तत्वों में यह अंतर्निहित सुविधा नहीं है, लेकिन आप इसे स्वयं लागू कर सकते हैं। उपयोगकर्ता तत्वों के कुछ गुणों के समान व्यवहार करने के लिए, आप उनके गेटर्स और सेटर्स को कॉन्फ़िगर कर सकते हैं।

 class MyCustomElement extends HTMLElement { // ... get myProperty() {   return this.hasAttribute('my-property'); } set myProperty(newValue) {   if (newValue) {     this.setAttribute('my-property', newValue);   } else {     this.removeAttribute('my-property');   } } // ... } 

मौजूदा वस्तुओं का विस्तार

कस्टम तत्व एपीआई आपको न केवल नए HTML तत्व बनाने की अनुमति देता है, बल्कि मौजूदा लोगों का भी विस्तार करता है। इसके अलावा, हम मानक तत्वों और कस्टम दोनों के बारे में बात कर रहे हैं। यह एक वर्ग की घोषणा करते समय extends का उपयोग करके किया जाता है:

 class MyAwesomeButton extends MyButton { // ... } customElements.define('my-awesome-button', MyAwesomeButton);</cosourcede>      ,  , ,    <code>customElements.define(...)</code>,    <code>extends</code>   ,      .     ,        ,        DOM-.   ,          ,      ,       . <source>class MyButton extends HTMLButtonElement { // ... } customElements.define('my-button', MyButton, {extends: 'button'}); 

विस्तारित मानक तत्वों को "अनुकूलित अंतर्निहित तत्व" भी कहा जाता है।

हमेशा मौजूदा तत्वों का विस्तार करने और इसे उत्तरोत्तर करने के लिए इसे नियम बनाने की सिफारिश की जाती है। यह आपको नए तत्वों में बचाने की अनुमति देगा जो पहले बनाए गए तत्वों (जो गुण, गुण, कार्य) में लागू किए गए थे।

कृपया ध्यान दें कि अब कस्टम बिल्ट-इन तत्व केवल क्रोम 67+ में समर्थित हैं। यह अन्य ब्राउज़रों में दिखाई देगा, हालांकि, यह ज्ञात है कि सफारी डेवलपर्स ने इस अवसर को लागू नहीं करने का फैसला किया।

अद्यतन आइटम

जैसा कि पहले ही उल्लेख किया गया है, कस्टम तत्वों को पंजीकृत करने के लिए customElements.define(...) विधि का उपयोग किया जाता है। हालाँकि, पंजीकरण को वह क्रिया नहीं कहा जा सकता जिसे पहले किया जाना चाहिए। उपयोगकर्ता तत्व पंजीकरण को कुछ समय के लिए स्थगित किया जा सकता है, इसके अलावा, यह समय तब भी आ सकता है जब तत्व पहले से ही डोम में जोड़ा गया हो। इस प्रक्रिया को अपग्रेड कहा जाता है। यह पता लगाने के लिए कि कोई आइटम कब पंजीकृत किया जाएगा, ब्राउज़र customElements.whenDefined(...) विधि प्रदान करता है। उसे तत्व टैग का नाम दिया गया है, और वह वादा वापस करता है जो तत्व के पंजीकरण के बाद हल हो जाता है।

 customElements.whenDefined('my-custom-element').then(_ => { console.log('My custom element is defined'); }); 

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

छाया डोम

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

कस्टम तत्व के लिए शैडो डोम का उपयोग कैसे करें:

 class MyCustomElement extends HTMLElement { // ... constructor() {   super();   let shadowRoot = this.attachShadow({mode: 'open'});   let elementContent = document.createElement('div');   shadowRoot.appendChild(elementContent); } // ... }); 

जैसा कि आप देख सकते हैं, इस this.attachShadow एक महत्वपूर्ण भूमिका निभाता this.attachShadow ।

टेम्पलेट्स

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

 <template id="my-custom-element-template"> <div class="my-custom-element">   <input type="text" class="email" />   <button class="submit"></button> </div> </template> 

यहां एक कस्टम तत्व में एक टेम्प्लेट लागू करने का तरीका बताया गया है:

 let myCustomElementTemplate = document.querySelector('#my-custom-element-template'); class MyCustomElement extends HTMLElement { // ... constructor() {   super();   let shadowRoot = this.attachShadow({mode: 'open'});   shadowRoot.appendChild(myCustomElementTemplate.content.cloneNode(true)); } // ... }); 

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

stylization

अब तक, हमने केवल सीएसएस को अनदेखा करते हुए जावास्क्रिप्ट और HTML के बारे में बात की है। इसलिए, अब हम शैलियों के विषय पर स्पर्श करते हैं। जाहिर है, हमें कस्टम तत्वों को स्टाइल करने के लिए किसी तरह की आवश्यकता है। शैडो डोम के अंदर स्टाइल्स को जोड़ा जा सकता है, लेकिन फिर सवाल यह उठता है कि ऐसे तत्वों को बाहर से कैसे स्टाइल किया जाए, उदाहरण के लिए - यदि उनका उपयोग उस व्यक्ति द्वारा नहीं किया जाता है जिसने उन्हें बनाया है। इस प्रश्न का उत्तर काफी सरल है - कस्टम तत्वों को उसी तरह से स्टाइल किया जाता है जैसे अंतर्निहित तत्वों को।

 my-custom-element { border-radius: 5px; width: 30%; height: 50%; // ... } 

ध्यान दें कि बाहरी शैली एक तत्व के अंदर घोषित शैलियों पर पूर्वता लेती है, उन्हें ओवरराइड करती है।

आपने देखा होगा कि कैसे, जब कोई पृष्ठ स्क्रीन पर प्रदर्शित होता है, तो कुछ बिंदु पर आप उस पर गैर-शैली वाली सामग्री देख सकते हैं (इसे FOUC - फ्लैश ऑफ अनस्टाइल कंटेंट कहा जाता है)। अपंजीकृत घटकों के लिए शैलियों को सेट करके और उन्हें पंजीकृत करते समय कुछ दृश्य प्रभावों का उपयोग करके आप इस घटना से बच सकते हैं। ऐसा करने के लिए, आप चयनकर्ता का उपयोग कर सकते हैं :defined । आप ऐसा कर सकते हैं, उदाहरण के लिए, इस तरह:

 my-button:not(:defined) { height: 20px; width: 50px; opacity: 0; } 

अज्ञात तत्व और अपरिभाषित उपयोगकर्ता तत्व

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

 var element = document.createElement('thisElementIsUnknown'); if (element instanceof HTMLUnknownElement) { console.log('The selected element is unknown'); } 

हालांकि, कस्टम तत्वों के साथ काम करते समय, ऐसी योजना लागू नहीं होती है। , ? , , HTMLElement .

 var element = document.createElement('this-element-is-undefined'); if (element instanceof HTMLElement) { console.log('The selected element is undefined but not unknown'); } 

HTMLElement HTMLUnknownElement , , , , - . , , , . div . .

Chrome 36+. API Custom Components v0, , , , . API, , — . API Custom Elements v1 Chrome 54+ Safari 10.1+ ( ). Mozilla v50, , . , Microsoft Edge API. , , webkit. , , , — IE 11.

, , , customElements
window :

 const supportsCustomElements = 'customElements' in window; if (supportsCustomElements) { // API Custom Elements   } 

:

 function loadScript(src) { return new Promise(function(resolve, reject) {   const script = document.createElement('script');   script.src = src;   script.onload = resolve;   script.onerror = reject;   document.head.appendChild(script); }); } //    -    . if (supportsCustomElements) { //    ,    . } else { loadScript('path/to/custom-elements.min.js').then(_ => {   //   ,     . }); } 

परिणाम

, :

• HTML- JavaScript-, , CSS-.
• HTML- ( , ).
• . , — JavaScript, HTML, CSS, , , .
• - (Shadow DOM, , , ).
• , .
• , .

, Custom Elements v1 , , , , , .

प्रिय पाठकों! ?