वेब घटक: Difference between revisions

From Vigyanwiki
(Created page with "{{distinguish|HTML Components}} {{multiple issues| {{original research|date=June 2021}} {{notability|date=June 2021}} }} वेब घटक सुविधाओं का...")
 
No edit summary
Line 1: Line 1:
{{distinguish|HTML Components}}
'''वेब घटक''' सुविधाओं का एक समूह है जो वेब के लिए एक मानक घटक मॉडल प्रदान करता है<ref>{{Citation|title=GitHub - w3c/webcomponents: Web Components specifications.|date=2019-01-03|url=https://github.com/w3c/webcomponents|publisher=World Wide Web Consortium|access-date=2019-01-03}}</ref> [[एनकैप्सुलेशन (ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग)]] और व्यक्तिगत [[HTML तत्व|HTML तत्वों]] की [[ अंतर ]] की अनुमति देना। वेब कंपोनेंट [[माइक्रोफ्रंटेंड]] बनाने का लोकप्रिय तरीका है।
{{multiple issues|
{{original research|date=June 2021}}
{{notability|date=June 2021}}
}}
वेब घटक सुविधाओं का एक समूह है जो वेब के लिए एक मानक घटक मॉडल प्रदान करता है<ref>{{Citation|title=GitHub - w3c/webcomponents: Web Components specifications.|date=2019-01-03|url=https://github.com/w3c/webcomponents|publisher=World Wide Web Consortium|access-date=2019-01-03}}</ref> [[एनकैप्सुलेशन (ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग)]] और व्यक्तिगत [[HTML तत्व]]ों की [[ अंतर ]] की अनुमति देना। वेब कंपोनेंट [[माइक्रोफ्रंटेंड]] बनाने का लोकप्रिय तरीका है।


वेब घटक बनाने के लिए उपयोग की जाने वाली प्राथमिक तकनीकों में शामिल हैं:<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/Web_Components|title=वेब घटक|website=MDN Web Docs|access-date=2019-01-03}}</ref>
वेब घटक बनाने के लिए उपयोग की जाने वाली प्राथमिक तकनीकों में शामिल हैं:<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/Web_Components|title=वेब घटक|website=MDN Web Docs|access-date=2019-01-03}}</ref>
Line 14: Line 9:
: HTML टुकड़े जो प्रस्तुत नहीं किए गए हैं, लेकिन जावास्क्रिप्ट के माध्यम से तत्काल होने तक संग्रहीत किए गए हैं<ref>{{cite web |url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template |title=<nowiki><template></nowiki>: The Content Template element
: HTML टुकड़े जो प्रस्तुत नहीं किए गए हैं, लेकिन जावास्क्रिप्ट के माध्यम से तत्काल होने तक संग्रहीत किए गए हैं<ref>{{cite web |url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template |title=<nowiki><template></nowiki>: The Content Template element
|website=[[MDN Web Docs]] |publisher=[[Mozilla]] |access-date=2018-07-08}}</ref>
|website=[[MDN Web Docs]] |publisher=[[Mozilla]] |access-date=2018-07-08}}</ref>


== विशेषताएँ ==
== विशेषताएँ ==
Line 20: Line 14:
=== कस्टम तत्व===
=== कस्टम तत्व===
कस्टम तत्वों के दो भाग हैं: स्वायत्त कस्टम तत्व और अनुकूलित अंतर्निहित तत्व। स्वायत्त कस्टम तत्व [[HTML]] तत्व हैं जो मूल HTML तत्वों से पूरी तरह से अलग होते हैं; वे अनिवार्य रूप से कस्टम एलिमेंट्स [[अप्लिकेशन प्रोग्रामिंग अंतरफलक]] का उपयोग करके नीचे से ऊपर तक बनाए गए हैं। अनुकूलित अंतर्निर्मित तत्व वे तत्व हैं जो अपनी कार्यक्षमता का पुन: उपयोग करने के लिए मूल HTML तत्वों पर निर्मित होते हैं।<ref>{{Cite web|url=https://www.w3.org/TR/custom-elements/|title=कस्टम तत्व|website=www.w3.org|access-date=2016-12-01}}</ref>
कस्टम तत्वों के दो भाग हैं: स्वायत्त कस्टम तत्व और अनुकूलित अंतर्निहित तत्व। स्वायत्त कस्टम तत्व [[HTML]] तत्व हैं जो मूल HTML तत्वों से पूरी तरह से अलग होते हैं; वे अनिवार्य रूप से कस्टम एलिमेंट्स [[अप्लिकेशन प्रोग्रामिंग अंतरफलक]] का उपयोग करके नीचे से ऊपर तक बनाए गए हैं। अनुकूलित अंतर्निर्मित तत्व वे तत्व हैं जो अपनी कार्यक्षमता का पुन: उपयोग करने के लिए मूल HTML तत्वों पर निर्मित होते हैं।<ref>{{Cite web|url=https://www.w3.org/TR/custom-elements/|title=कस्टम तत्व|website=www.w3.org|access-date=2016-12-01}}</ref>
=== छाया डोम ===
=== छाया डोम ===
शैडो DOM एक कार्यक्षमता है जो [[वेब ब्राउज़र]] को [[दस्तावेज़ ऑब्जेक्ट मॉडल]] तत्वों को मुख्य दस्तावेज़ DOM ट्री में डाले बिना प्रस्तुत करने की अनुमति देती है। यह डेवलपर और ब्राउज़र तक पहुँचने के बीच एक अवरोध पैदा करता है; डेवलपर शैडो DOM तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के भीतर सीएसएस के दायरे का प्रभाव यह है कि HTML तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के जोखिम के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। हालाँकि ये तत्व HTML और CSS के संबंध में संक्षिप्त हैं, फिर भी वे ऐसी घटनाओं को सक्रिय कर सकते हैं जिन्हें दस्तावेज़ में अन्य तत्वों द्वारा उठाया जा सकता है।<ref>{{Cite web|url=https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/|title=What the Heck is Shadow DOM?|date=2011-01-15|website=Dimitri Glazkov|access-date=2016-12-01}}</ref><ref name=":0">{{Cite web|url=https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom|title=Shadow DOM v1: Self-Contained Web Components {{!}} Web {{!}} Google Developers|website=Google Developers|access-date=2016-12-01}}</ref>
शैडो DOM एक कार्यक्षमता है जो [[वेब ब्राउज़र]] को [[दस्तावेज़ ऑब्जेक्ट मॉडल]] तत्वों को मुख्य दस्तावेज़ DOM ट्री में डाले बिना प्रस्तुत करने की अनुमति देती है। यह डेवलपर और ब्राउज़र तक पहुँचने के बीच एक अवरोध पैदा करता है; डेवलपर शैडो DOM तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के भीतर सीएसएस के दायरे का प्रभाव यह है कि HTML तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के जोखिम के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। हालाँकि ये तत्व HTML और CSS के संबंध में संक्षिप्त हैं, फिर भी वे ऐसी घटनाओं को सक्रिय कर सकते हैं जिन्हें दस्तावेज़ में अन्य तत्वों द्वारा उठाया जा सकता है।<ref>{{Cite web|url=https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/|title=What the Heck is Shadow DOM?|date=2011-01-15|website=Dimitri Glazkov|access-date=2016-12-01}}</ref><ref name=":0">{{Cite web|url=https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom|title=Shadow DOM v1: Self-Contained Web Components {{!}} Web {{!}} Google Developers|website=Google Developers|access-date=2016-12-01}}</ref>
Line 27: Line 19:


शैडो डोम को हमेशा किसी मौजूदा तत्व से जोड़ा जाना चाहिए, या तो इसे शाब्दिक तत्व के रूप में जोड़कर या [[स्क्रिप्ट (कंप्यूटर प्रोग्रामिंग)]] के माध्यम से। [[जावास्क्रिप्ट]] में, शैडो DOMs का उपयोग करके एक तत्व से जुड़े होते हैं <code>Element.attachShadow()</code>.<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM|title=छाया डोम|website=Mozilla Developer Network|access-date=2016-12-01}}</ref>
शैडो डोम को हमेशा किसी मौजूदा तत्व से जोड़ा जाना चाहिए, या तो इसे शाब्दिक तत्व के रूप में जोड़कर या [[स्क्रिप्ट (कंप्यूटर प्रोग्रामिंग)]] के माध्यम से। [[जावास्क्रिप्ट]] में, शैडो DOMs का उपयोग करके एक तत्व से जुड़े होते हैं <code>Element.attachShadow()</code>.<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM|title=छाया डोम|website=Mozilla Developer Network|access-date=2016-12-01}}</ref>
=== HTML टेम्पलेट ===
=== HTML टेम्पलेट ===
HTML टेम्प्लेट HTML के उन हिस्सों को सम्मिलित करने का एक तरीका है जिन पर इच्छानुसार मुहर लगाई जाती है। HTML टेम्प्लेट का सिंटैक्स इस तरह दिखता है:
HTML टेम्प्लेट HTML के उन हिस्सों को सम्मिलित करने का एक तरीका है जिन पर इच्छानुसार मुहर लगाई जाती है। HTML टेम्प्लेट का सिंटैक्स इस तरह दिखता है:
Line 41: Line 31:
</syntaxhighlight>
</syntaxhighlight>
स्क्रिप्ट नहीं चलेंगी, और जो संसाधन टेम्पलेट के अंदर हैं उन्हें तब तक नहीं लाया जाएगा जब तक कि टेम्पलेट पर मुहर नहीं लग जाती।<ref>{{Cite web|url=http://webcomponents.org/articles/introduction-to-template-element/|title=Introduction to the template elements — WebComponents.org|last=Community|website=webcomponents.org|access-date=2016-12-03}}</ref>
स्क्रिप्ट नहीं चलेंगी, और जो संसाधन टेम्पलेट के अंदर हैं उन्हें तब तक नहीं लाया जाएगा जब तक कि टेम्पलेट पर मुहर नहीं लग जाती।<ref>{{Cite web|url=http://webcomponents.org/articles/introduction-to-template-element/|title=Introduction to the template elements — WebComponents.org|last=Community|website=webcomponents.org|access-date=2016-12-03}}</ref>
== ब्राउज़र समर्थन ==
== ब्राउज़र समर्थन ==


Line 51: Line 39:
ऐसी कई लाइब्रेरी हैं जो कस्टम तत्वों को बनाते समय अमूर्तता के स्तर को बढ़ाने के उद्देश्य से वेब घटकों पर बनाई गई हैं। इनमें से कुछ लाइब्रेरी हैं [https://x-tag.github.io/ X-Tag], [https://slimjs.com/ Slim.js], [[ पॉलिमर (पुस्तकालय) ]], [https://bosonic.github .io/ बोसोनिक], [https://riot.js.org/ Riot.js], [https://developer.salesforce.com/docs/component-library/documentation/en/lwc सेल्सफोर्स लाइटनिंग वेब कंपोनेंट्स], [https://www.dataformsjs.com/ DataFormsJS] और [https://github.com/telepath-elements/telepathic-element/ टेलीपैथी]
ऐसी कई लाइब्रेरी हैं जो कस्टम तत्वों को बनाते समय अमूर्तता के स्तर को बढ़ाने के उद्देश्य से वेब घटकों पर बनाई गई हैं। इनमें से कुछ लाइब्रेरी हैं [https://x-tag.github.io/ X-Tag], [https://slimjs.com/ Slim.js], [[ पॉलिमर (पुस्तकालय) ]], [https://bosonic.github .io/ बोसोनिक], [https://riot.js.org/ Riot.js], [https://developer.salesforce.com/docs/component-library/documentation/en/lwc सेल्सफोर्स लाइटनिंग वेब कंपोनेंट्स], [https://www.dataformsjs.com/ DataFormsJS] और [https://github.com/telepath-elements/telepathic-element/ टेलीपैथी]


उपरोक्त सूची से, बोसोनिक, पॉलिमर, टेलीपैथी और डेटाफॉर्मजेएस, सभी तैयार घटक प्रदान करते हैं जो उपयोग के लिए निःशुल्क हैं। इन घटकों का परस्पर उपयोग किया जा सकता है क्योंकि ये सभी खुली वेब प्रौद्योगिकियों पर निर्मित हैं। जबकि बोसोनिक, पॉलिमर और डेटाफॉर्मजेएस में कहीं अधिक पूर्व-निर्मित घटक हैं।{{clarify|date=December 2016}} टेलीपैथी धातु के सबसे करीब है क्योंकि इसका एकमात्र ध्यान डेवलपर को आसानी से बनाए रखने वाले वेब घटकों को तेजी से बनाने में मदद करने पर है।<ref>{{Cite web|url=https://vaadin.com/blog/web-components-in-production-use-are-we-there-yet-|title=Web Components in production use – are we there yet?|website=vaadin.com|access-date=2016-11-21}}</ref>
उपरोक्त सूची से, बोसोनिक, पॉलिमर, टेलीपैथी और डेटाफॉर्मजेएस, सभी तैयार घटक प्रदान करते हैं जो उपयोग के लिए निःशुल्क हैं। इन घटकों का परस्पर उपयोग किया जा सकता है क्योंकि ये सभी खुली वेब प्रौद्योगिकियों पर निर्मित हैं। जबकि बोसोनिक, पॉलिमर और डेटाफॉर्मजेएस में कहीं अधिक पूर्व-निर्मित घटक हैं। टेलीपैथी धातु के सबसे करीब है क्योंकि इसका एकमात्र ध्यान डेवलपर को आसानी से बनाए रखने वाले वेब घटकों को तेजी से बनाने में मदद करने पर है।<ref>{{Cite web|url=https://vaadin.com/blog/web-components-in-production-use-are-we-there-yet-|title=Web Components in production use – are we there yet?|website=vaadin.com|access-date=2016-11-21}}</ref>
 


== समुदाय ==
== समुदाय ==
Line 59: Line 46:
== इतिहास ==
== इतिहास ==
2011 में, फ्रंटियर्स कॉन्फ्रेंस में एलेक्स रसेल द्वारा पहली बार वेब कंपोनेंट्स पेश किए गए थे।<ref>{{Cite web|url=https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell|title=Web Components and Model Driven Views by Alex Russell · Fronteers|website=fronteers.nl|access-date=2016-12-02}}</ref>
2011 में, फ्रंटियर्स कॉन्फ्रेंस में एलेक्स रसेल द्वारा पहली बार वेब कंपोनेंट्स पेश किए गए थे।<ref>{{Cite web|url=https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell|title=Web Components and Model Driven Views by Alex Russell · Fronteers|website=fronteers.nl|access-date=2016-12-02}}</ref>
2013 में, [[Google]] द्वारा वेब कंपोनेंट्स पर आधारित एक लाइब्रेरी, पॉलिमर (लाइब्रेरी) जारी की गई थी।<ref name="hacks_2015-06"/>


2016 में, RequireJS को कस्टम तत्वों के लिए जावास्क्रिप्ट लाइब्रेरी और [[ अतुल्यकालिक मॉड्यूल परिभाषा ]] लोडर प्लगइन के रूप में पेश किया गया था।<ref>{{cite web|url=https://developer.adobe.com/commerce/frontend-core/javascript/requirejs/|title=RequireJS in Commerce}}</ref>
2013 में, [[Google]] द्वारा वेब कंपोनेंट्स पर आधारित एक लाइब्रेरी, पॉलिमर (लाइब्रेरी) जारी की गई थी।<ref name="hacks_2015-06" />
 
2016 में, RequireJS को कस्टम तत्वों के लिए जावास्क्रिप्ट लाइब्रेरी और [[ अतुल्यकालिक मॉड्यूल परिभाषा | अतुल्यकालिक मॉड्यूल परिभाषा]] लोडर प्लगइन के रूप में पेश किया गया था।<ref>{{cite web|url=https://developer.adobe.com/commerce/frontend-core/javascript/requirejs/|title=RequireJS in Commerce}}</ref>
 
2017 में, Ionic (मोबाइल ऐप फ्रेमवर्क) टीम ने StensilJS बनाया, एक जावास्क्रिप्ट कंपाइलर जो वेब कंपोनेंट्स जेनरेट करता है।<ref>{{cite web|url=https://levelup.gitconnected.com/web-component-solutions-a-comparison-e2fa25c34730|title=Web Component Solutions: A Comparison}}</ref>
2017 में, Ionic (मोबाइल ऐप फ्रेमवर्क) टीम ने StensilJS बनाया, एक जावास्क्रिप्ट कंपाइलर जो वेब कंपोनेंट्स जेनरेट करता है।<ref>{{cite web|url=https://levelup.gitconnected.com/web-component-solutions-a-comparison-e2fa25c34730|title=Web Component Solutions: A Comparison}}</ref>
2018 में, एंगुलर 6 ने एंगुलर एलिमेंट्स पेश किए जो आपको अपने एंगुलर घटकों को कस्टम वेब तत्वों के रूप में पैकेज करने की सुविधा देते हैं, जो वेब प्लेटफ़ॉर्म एपीआई के वेब घटकों के सेट का हिस्सा हैं।<ref>{{cite web|url=https://www.freecodecamp.org/news/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a/|title=How to create Angular 6 Custom Elements and Web Components}}</ref>
2018 में, एंगुलर 6 ने एंगुलर एलिमेंट्स पेश किए जो आपको अपने एंगुलर घटकों को कस्टम वेब तत्वों के रूप में पैकेज करने की सुविधा देते हैं, जो वेब प्लेटफ़ॉर्म एपीआई के वेब घटकों के सेट का हिस्सा हैं।<ref>{{cite web|url=https://www.freecodecamp.org/news/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a/|title=How to create Angular 6 Custom Elements and Web Components}}</ref>
2018 में, [[फ़ायरफ़ॉक्स]] 63 ने वेब कंपोनेंट्स समर्थन को डिफ़ॉल्ट रूप से सक्षम किया और उन्हें समर्थन देने के लिए डेवलपर टूल को अपडेट किया।<ref>{{Cite web | url=https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/ |title = Developer Tools support for Web Components in Firefox 63}}</ref>
2018 में, [[फ़ायरफ़ॉक्स]] 63 ने वेब कंपोनेंट्स समर्थन को डिफ़ॉल्ट रूप से सक्षम किया और उन्हें समर्थन देने के लिए डेवलपर टूल को अपडेट किया।<ref>{{Cite web | url=https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/ |title = Developer Tools support for Web Components in Firefox 63}}</ref>
2018 में, LitElement को Google Chrome टीम द्वारा बड़े पॉलिमर (लाइब्रेरी) प्रोजेक्ट के हिस्से के रूप में विकसित किया गया था। लिटएलिमेंट को वेब घटकों को बनाने के लिए एक हल्के और उपयोग में आसान ढांचे के रूप में डिजाइन किया गया था।
2018 में, LitElement को Google Chrome टीम द्वारा बड़े पॉलिमर (लाइब्रेरी) प्रोजेक्ट के हिस्से के रूप में विकसित किया गया था। लिटएलिमेंट को वेब घटकों को बनाने के लिए एक हल्के और उपयोग में आसान ढांचे के रूप में डिजाइन किया गया था।


Line 71: Line 63:
<ref name="hacks_2015-06">{{Cite web|url=https://hacks.mozilla.org/2015/06/the-state-of-web-components/|title=The state of Web Components ★ Mozilla Hacks – the Web developer blog|website=hacks.mozilla.org|access-date=2016-12-02}}</ref>
<ref name="hacks_2015-06">{{Cite web|url=https://hacks.mozilla.org/2015/06/the-state-of-web-components/|title=The state of Web Components ★ Mozilla Hacks – the Web developer blog|website=hacks.mozilla.org|access-date=2016-12-02}}</ref>
}}
}}
== बाहरी संबंध ==
== बाहरी संबंध ==
*{{official website}}
*{{official website}}

Revision as of 19:07, 14 July 2023

वेब घटक सुविधाओं का एक समूह है जो वेब के लिए एक मानक घटक मॉडल प्रदान करता है[1] एनकैप्सुलेशन (ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग) और व्यक्तिगत HTML तत्वों की अंतर की अनुमति देना। वेब कंपोनेंट माइक्रोफ्रंटेंड बनाने का लोकप्रिय तरीका है।

वेब घटक बनाने के लिए उपयोग की जाने वाली प्राथमिक तकनीकों में शामिल हैं:[2]

कस्टम तत्व
नए HTML तत्वों को परिभाषित करने के लिए एपीआई
छाया डोम
संपुटित DOM और स्टाइल, रचना के साथ
HTML टेम्प्लेट
HTML टुकड़े जो प्रस्तुत नहीं किए गए हैं, लेकिन जावास्क्रिप्ट के माध्यम से तत्काल होने तक संग्रहीत किए गए हैं[3]

विशेषताएँ

कस्टम तत्व

कस्टम तत्वों के दो भाग हैं: स्वायत्त कस्टम तत्व और अनुकूलित अंतर्निहित तत्व। स्वायत्त कस्टम तत्व HTML तत्व हैं जो मूल HTML तत्वों से पूरी तरह से अलग होते हैं; वे अनिवार्य रूप से कस्टम एलिमेंट्स अप्लिकेशन प्रोग्रामिंग अंतरफलक का उपयोग करके नीचे से ऊपर तक बनाए गए हैं। अनुकूलित अंतर्निर्मित तत्व वे तत्व हैं जो अपनी कार्यक्षमता का पुन: उपयोग करने के लिए मूल HTML तत्वों पर निर्मित होते हैं।[4]

छाया डोम

शैडो DOM एक कार्यक्षमता है जो वेब ब्राउज़र को दस्तावेज़ ऑब्जेक्ट मॉडल तत्वों को मुख्य दस्तावेज़ DOM ट्री में डाले बिना प्रस्तुत करने की अनुमति देती है। यह डेवलपर और ब्राउज़र तक पहुँचने के बीच एक अवरोध पैदा करता है; डेवलपर शैडो DOM तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के भीतर सीएसएस के दायरे का प्रभाव यह है कि HTML तत्वों को व्यापक शैली पत्रक शैलियों के लीक होने और उन तत्वों को प्रभावित करने के जोखिम के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। हालाँकि ये तत्व HTML और CSS के संबंध में संक्षिप्त हैं, फिर भी वे ऐसी घटनाओं को सक्रिय कर सकते हैं जिन्हें दस्तावेज़ में अन्य तत्वों द्वारा उठाया जा सकता है।[5][6] किसी तत्व में स्कोप्ड सबट्री को छाया वृक्ष कहा जाता है। छाया वृक्ष जिस तत्व से जुड़ा होता है उसे छाया होस्ट कहा जाता है।[6]

शैडो डोम को हमेशा किसी मौजूदा तत्व से जोड़ा जाना चाहिए, या तो इसे शाब्दिक तत्व के रूप में जोड़कर या स्क्रिप्ट (कंप्यूटर प्रोग्रामिंग) के माध्यम से। जावास्क्रिप्ट में, शैडो DOMs का उपयोग करके एक तत्व से जुड़े होते हैं Element.attachShadow().[7]

HTML टेम्पलेट

HTML टेम्प्लेट HTML के उन हिस्सों को सम्मिलित करने का एक तरीका है जिन पर इच्छानुसार मुहर लगाई जाती है। HTML टेम्प्लेट का सिंटैक्स इस तरह दिखता है: 

<html>
    <template>
        <h1><slot name="title"></slot></h1>
        <p><slot name="description"></slot></p>
    </template>
</html>

स्क्रिप्ट नहीं चलेंगी, और जो संसाधन टेम्पलेट के अंदर हैं उन्हें तब तक नहीं लाया जाएगा जब तक कि टेम्पलेट पर मुहर नहीं लग जाती।[8]

ब्राउज़र समर्थन

वेब घटक सभी प्रमुख ब्राउज़रों के वर्तमान संस्करणों द्वारा समर्थित हैं।[9] पुराने ब्राउज़रों के साथ बैकवर्ड संगतता जावास्क्रिप्ट-आधारित पॉलीफ़िल (प्रोग्रामिंग) का उपयोग करके कार्यान्वित की जाती है।

पुस्तकालय

ऐसी कई लाइब्रेरी हैं जो कस्टम तत्वों को बनाते समय अमूर्तता के स्तर को बढ़ाने के उद्देश्य से वेब घटकों पर बनाई गई हैं। इनमें से कुछ लाइब्रेरी हैं X-Tag, Slim.js, पॉलिमर (पुस्तकालय) , .io/ बोसोनिक, Riot.js, सेल्सफोर्स लाइटनिंग वेब कंपोनेंट्स, DataFormsJS और टेलीपैथी

उपरोक्त सूची से, बोसोनिक, पॉलिमर, टेलीपैथी और डेटाफॉर्मजेएस, सभी तैयार घटक प्रदान करते हैं जो उपयोग के लिए निःशुल्क हैं। इन घटकों का परस्पर उपयोग किया जा सकता है क्योंकि ये सभी खुली वेब प्रौद्योगिकियों पर निर्मित हैं। जबकि बोसोनिक, पॉलिमर और डेटाफॉर्मजेएस में कहीं अधिक पूर्व-निर्मित घटक हैं। टेलीपैथी धातु के सबसे करीब है क्योंकि इसका एकमात्र ध्यान डेवलपर को आसानी से बनाए रखने वाले वेब घटकों को तेजी से बनाने में मदद करने पर है।[10]

समुदाय

वेब कंपोनेंट इकोसिस्टम के लिए कई सामुदायिक प्रयास हैं। WebComponents.org[11] किसी भी मौजूदा वेब घटक, हर जगह कस्टम तत्वों को खोजने के लिए एक इंटरफ़ेस प्रदान करता है[12] यह सत्यापित करता है कि लोकप्रिय फ्रंट-एंड फ्रेमवर्क संगत हैं और लंबित बग और उपलब्ध वर्कअराउंड के सेट के साथ वेब घटक मानक का उपयोग करने के लिए तैयार हैं। इसके अलावा, वाडिन ट्यूटोरियल[13] इसमें एक समर्पित अनुभाग है जो दिखाता है कि उदाहरण डेमो ऐप्स और इसी तरह से संबंधित विषयों के साथ उन वर्कअराउंड का कुशलतापूर्वक उपयोग कैसे किया जाता है।

इतिहास

2011 में, फ्रंटियर्स कॉन्फ्रेंस में एलेक्स रसेल द्वारा पहली बार वेब कंपोनेंट्स पेश किए गए थे।[14]

2013 में, Google द्वारा वेब कंपोनेंट्स पर आधारित एक लाइब्रेरी, पॉलिमर (लाइब्रेरी) जारी की गई थी।[15]

2016 में, RequireJS को कस्टम तत्वों के लिए जावास्क्रिप्ट लाइब्रेरी और अतुल्यकालिक मॉड्यूल परिभाषा लोडर प्लगइन के रूप में पेश किया गया था।[16]

2017 में, Ionic (मोबाइल ऐप फ्रेमवर्क) टीम ने StensilJS बनाया, एक जावास्क्रिप्ट कंपाइलर जो वेब कंपोनेंट्स जेनरेट करता है।[17]

2018 में, एंगुलर 6 ने एंगुलर एलिमेंट्स पेश किए जो आपको अपने एंगुलर घटकों को कस्टम वेब तत्वों के रूप में पैकेज करने की सुविधा देते हैं, जो वेब प्लेटफ़ॉर्म एपीआई के वेब घटकों के सेट का हिस्सा हैं।[18]

2018 में, फ़ायरफ़ॉक्स 63 ने वेब कंपोनेंट्स समर्थन को डिफ़ॉल्ट रूप से सक्षम किया और उन्हें समर्थन देने के लिए डेवलपर टूल को अपडेट किया।[19]

2018 में, LitElement को Google Chrome टीम द्वारा बड़े पॉलिमर (लाइब्रेरी) प्रोजेक्ट के हिस्से के रूप में विकसित किया गया था। लिटएलिमेंट को वेब घटकों को बनाने के लिए एक हल्के और उपयोग में आसान ढांचे के रूप में डिजाइन किया गया था।

संदर्भ

  1. ↑ GitHub - w3c/webcomponents: Web Components specifications., World Wide Web Consortium, 2019-01-03, retrieved 2019-01-03
  2. ↑ "वेब घटक". MDN Web Docs. Retrieved 2019-01-03.
  3. ↑ "<template>: The Content Template element". MDN Web Docs. Mozilla. Retrieved 2018-07-08.
  4. ↑ "कस्टम तत्व". www.w3.org. Retrieved 2016-12-01.
  5. ↑ "What the Heck is Shadow DOM?". Dimitri Glazkov. 2011-01-15. Retrieved 2016-12-01.
  6. ↑ 6.0 6.1 "Shadow DOM v1: Self-Contained Web Components | Web | Google Developers". Google Developers. Retrieved 2016-12-01.
  7. ↑ "छाया डोम". Mozilla Developer Network. Retrieved 2016-12-01.
  8. ↑ Community. "Introduction to the template elements — WebComponents.org". webcomponents.org. Retrieved 2016-12-03.
  9. ↑ "webcomponents.org - वेब घटकों पर चर्चा करें और साझा करें". www.webcomponents.org (in English). Retrieved 2020-07-22.
  10. ↑ "Web Components in production use – are we there yet?". vaadin.com. Retrieved 2016-11-21.
  11. ↑ "Search available Web Components".
  12. ↑ "Validate Front-end Frameworks with Web Components Standard".
  13. ↑ "Web Components Tutorials".
  14. ↑ "Web Components and Model Driven Views by Alex Russell · Fronteers". fronteers.nl. Retrieved 2016-12-02.
  15. ↑ "The state of Web Components ★ Mozilla Hacks – the Web developer blog". hacks.mozilla.org. Retrieved 2016-12-02.
  16. ↑ "RequireJS in Commerce".
  17. ↑ "Web Component Solutions: A Comparison".
  18. ↑ "How to create Angular 6 Custom Elements and Web Components".
  19. ↑ "Developer Tools support for Web Components in Firefox 63".

बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=वेब_घटक&oldid=222025’