वेब घटक: Difference between revisions

From Vigyanwiki
No edit summary
No edit summary
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
'''वेब घटक''' सुविधाओं का एक समूह है जो वेब के लिए एक मानक घटक मॉडल प्रदान करता है<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>{{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 13: Line 13:


=== कस्टम तत्व===
=== कस्टम तत्व===
कस्टम तत्वों के दो भाग हैं: स्वायत्त कस्टम तत्व और अनुकूलित अंतर्निहित तत्व। स्वायत्त कस्टम तत्व [[HTML|एचटीएमएल]] तत्व हैं जो मूल एचटीएमएल तत्वों से पूरी तरह से भिन्न होते हैं; वे अनिवार्य रूप से कस्टम एलिमेंट्स [[अप्लिकेशन प्रोग्रामिंग अंतरफलक]] का उपयोग करके नीचे से ऊपर तक बनाए गए हैं। अनुकूलित अंतर्निर्मित तत्व वे तत्व हैं जो अपनी कार्यक्षमता का पुन: उपयोग करने के लिए मूल एचटीएमएल तत्वों पर निर्मित होते हैं।<ref>{{Cite web|url=https://www.w3.org/TR/custom-elements/|title=कस्टम तत्व|website=www.w3.org|access-date=2016-12-01}}</ref>
कस्टम तत्वों के दो भाग हैं: स्वायत्त कस्टम तत्व और अनुकूलित अंतर्निहित तत्व। स्वायत्त कस्टम तत्व [[HTML|एचटीएमएल]] तत्व हैं जो मूल एचटीएमएल तत्वों से पूरी तरह से भिन्न होते हैं; वे अनिवार्य रूप से कस्टम एलिमेंट्स [[अप्लिकेशन प्रोग्रामिंग अंतरफलक]] एपीआई का उपयोग करके नीचे से ऊपर तक बनाए गए हैं। अनुकूलित अंतर्निर्मित तत्व वे तत्व हैं जो अपनी कार्यक्षमता का पुन: उपयोग करने के लिए मूल एचटीएमएल तत्वों पर निर्मित होते हैं।<ref>{{Cite web|url=https://www.w3.org/TR/custom-elements/|title=कस्टम तत्व|website=www.w3.org|access-date=2016-12-01}}</ref>
=== छाया डीओएम ===
=== छाया डीओएम ===
शैडो डीओएम एक कार्यक्षमता है जो [[वेब ब्राउज़र]] को [[दस्तावेज़ ऑब्जेक्ट मॉडल]] तत्वों को मुख्य दस्तावेज़ डीओएम ट्री में डाले बिना प्रस्तुत करने की अनुमति देती है। यह डेवलपर और ब्राउज़र तक पहुँचने के समूह एक अवरोध उत्पन्न करता है; डेवलपर शैडो डीओएम तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के अंदर सीएसएस के सीमा का प्रभाव यह है कि एचटीएमएल तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के कठिन परिस्थिति के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। यद्यपि यह तत्व एचटीएमएल और सीएसएस के संबंध में संक्षिप्त हैं, फिर भी वे ऐसी घटनाओं को सक्रिय कर सकते हैं जिन्हें दस्तावेज़ में अन्य तत्वों द्वारा उठाया जा सकता है।<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>
शैडो डीओएम कार्यक्षमता है जो [[वेब ब्राउज़र]] को [[दस्तावेज़ ऑब्जेक्ट मॉडल]] तत्वों को मुख्य दस्तावेज़ डीओएम ट्री में डाले बिना प्रस्तुत करने की अनुमति देती है। यह डेवलपर और ब्राउज़र तक पहुँचने के समूह अवरोध उत्पन्न करता है; डेवलपर शैडो डीओएम तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के अंदर सीएसएस के सीमा का प्रभाव यह है कि एचटीएमएल तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के कठिन परिस्थिति के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। यद्यपि यह तत्व एचटीएमएल और सीएसएस के संबंध में संक्षिप्त हैं, फिर भी वे ऐसी घटनाओं को सक्रिय कर सकते हैं जिन्हें दस्तावेज़ में अन्य तत्वों द्वारा उठाया जा सकता है।<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>


किसी तत्व में स्कोप्ड सबट्री को छाया वृक्ष कहा जाता है। छाया वृक्ष जिस तत्व से जुड़ा होता है उसे छाया होस्ट कहा जाता है।<ref name=":0" />
किसी तत्व में स्कोप्ड सबट्री को छाया वृक्ष कहा जाता है। छाया वृक्ष जिस तत्व से जुड़ा होता है उसे छाया होस्ट कहा जाता है।<ref name=":0" />


शैडो डोम को सदैव किसी सम्मिलिता तत्व से जोड़ा जाना चाहिए, या तब इसे शाब्दिक तत्व के रूप में जोड़कर या [[स्क्रिप्ट (कंप्यूटर प्रोग्रामिंग)]] के माध्यम से। [[जावास्क्रिप्ट]] में, शैडो 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>
=== एचटीएमएल टेम्पलेट ===
=== एचटीएमएल टेम्पलेट ===
एचटीएमएल टेम्प्लेट एचटीएमएल के उन हिस्सों को सम्मिलित करने का एक प्रणाली है जिन पर इच्छानुसार मुहर लगाई जाती है। एचटीएमएल टेम्प्लेट का सिंटैक्स इस तरह दिखता है:
एचटीएमएल टेम्प्लेट एचटीएमएल के उन हिस्सों को सम्मिलित करने की प्रणाली है जिन पर इच्छानुसार मुहर लगाई जाती है। एचटीएमएल टेम्प्लेट का सिंटैक्स इस तरह दिखता है:


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
Line 36: Line 36:
वेब घटक सभी प्रमुख ब्राउज़रों के वर्तमान संस्करणों द्वारा समर्थित हैं।<ref>{{Cite web|title=webcomponents.org - वेब घटकों पर चर्चा करें और साझा करें|url=https://www.webcomponents.org/|access-date=2020-07-22|website=www.webcomponents.org|language=en-us}}</ref>
वेब घटक सभी प्रमुख ब्राउज़रों के वर्तमान संस्करणों द्वारा समर्थित हैं।<ref>{{Cite web|title=webcomponents.org - वेब घटकों पर चर्चा करें और साझा करें|url=https://www.webcomponents.org/|access-date=2020-07-22|website=www.webcomponents.org|language=en-us}}</ref>


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


== पुस्तकालय ==
== पुस्तकालय ==
ऐसी अनेक लाइब्रेरी हैं जो कस्टम तत्वों को बनाते समय अमूर्तता के स्तर को बढ़ाने के उद्देश्य से वेब घटकों पर बनाई गई हैं। इनमें से कुछ लाइब्रेरी हैं [https://x-tag.github.io/ एक्स-टैग], [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/ डेटाफॉर्मजेएस] और [https://github.com/telepath-elements/telepathic-element/ टेलीपैथी]
ऐसी अनेक लाइब्रेरी हैं जो कस्टम तत्वों को बनाते समय अमूर्तता के स्तर को बढ़ाने के उद्देश्य से वेब घटकों पर बनाई गई हैं। इनमें से कुछ लाइब्रेरी हैं उदाहरण [https://x-tag.github.io/ एक्स-टैग], [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/ डेटाफॉर्मजेएस] और [https://github.com/telepath-elements/telepathic-element/ टेलीपैथी] हैं।


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


== समुदाय ==
== समुदाय ==
वेब कंपोनेंट इकोसिस्टम के लिए अनेक सामुदायिक प्रयास हैं। WebComponents.org<ref>{{Cite web|url=https://www.webcomponents.org/search|title=Search available Web Components}}</ref> किसी भी सम्मिलिता वेब घटक, हर स्थान कस्टम तत्वों को खोजने के लिए एक इंटरफ़ेस प्रदान करता है<ref>{{Cite web|url=https://custom-elements-everywhere.com|title=Validate Front-end Frameworks with Web Components Standard}}</ref> यह सत्यापित करता है कि लोकप्रिय फ्रंट-एंड फ्रेमवर्क संगत हैं और लंबित बग और उपलब्ध वर्कअराउंड के समूह के साथ वेब घटक मानक का उपयोग करने के लिए तैयार हैं। इसके अतिरिक्त, वाडिन ट्यूटोरियल<ref>{{Cite web|url=https://vaadin.com/learn/tutorials?query=web%20components|title=Web Components Tutorials}}</ref> इसमें एक समर्पित अनुभाग है जो दिखाता है कि उदाहरण डेमो ऐप्स और इसी तरह से संबंधित विषयों के साथ उन वर्कअराउंड का कुशलतापूर्वक उपयोग कैसे किया जाता है।
वेब कंपोनेंट इकोसिस्टम के लिए अनेक सामुदायिक प्रयास हैं। WebComponents.org<ref>{{Cite web|url=https://www.webcomponents.org/search|title=Search available Web Components}}</ref> किसी भी सम्मिलिता वेब घटक को खोजने के लिए इंटरफ़ेस प्रदान करता है<ref>{{Cite web|url=https://custom-elements-everywhere.com|title=Validate Front-end Frameworks with Web Components Standard}}</ref>, हर स्थान कस्टम तत्वों में यह सत्यापित करता है कि लोकप्रिय फ्रंट-एंड फ्रेमवर्क संगत हैं और लंबित बग और उपलब्ध वर्कअराउंड के समूह के साथ वेब घटक मानक का उपयोग करने के लिए तैयार हैं या नहीं। इसके अतिरिक्त, वाडिन ट्यूटोरियल<ref>{{Cite web|url=https://vaadin.com/learn/tutorials?query=web%20components|title=Web Components Tutorials}}</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>
वर्ष 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" />
वर्ष 2013 में, [[Google|गूगल]] द्वारा वेब कंपोनेंट्स पर आधारित लाइब्रेरी, पॉलिमर (लाइब्रेरी) जारी की गई थी।<ref name="hacks_2015-06" />


वर्ष 2016 में, आवश्यकता जेएस को कस्टम तत्वों के लिए जावास्क्रिप्ट लाइब्रेरी और [[ अतुल्यकालिक मॉड्यूल परिभाषा | अतुल्यकालिक मॉड्यूल परिभाषा]] लोडर प्लगइन के रूप में प्रस्तुतकिया गया था।<ref>{{cite web|url=https://developer.adobe.com/commerce/frontend-core/javascript/requirejs/|title=RequireJS in Commerce}}</ref>
वर्ष 2016 में, आवश्यकता जेएस को कस्टम तत्वों के लिए जावास्क्रिप्ट लाइब्रेरी और [[ अतुल्यकालिक मॉड्यूल परिभाषा |अतुल्यकालिक मॉड्यूल परिभाषा]] लोडर प्लगइन के रूप में प्रस्तुत किया गया था।<ref>{{cite web|url=https://developer.adobe.com/commerce/frontend-core/javascript/requirejs/|title=RequireJS in Commerce}}</ref>


वर्ष 2017 में, Ionic (मोबाइल ऐप फ्रेमवर्क) टीम ने स्टेंसिलजेएस बनाया, एक जावास्क्रिप्ट कंपाइलर जो वेब कंपोनेंट्स जेनरेट करता है।<ref>{{cite web|url=https://levelup.gitconnected.com/web-component-solutions-a-comparison-e2fa25c34730|title=Web Component Solutions: A Comparison}}</ref>
वर्ष 2017 में, Ionic (मोबाइल ऐप फ्रेमवर्क) टीम ने स्टेंसिलजेएस बनाया, जो  एक जावास्क्रिप्ट कंपाइलर है जो वेब कंपोनेंट्स उत्पन्न करता है।<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 में, लिट एलिमेंट को गूगल क्रोम टीम द्वारा बड़े पॉलिमर (लाइब्रेरी) प्रोजेक्ट के हिस्से के रूप में विकसित किया गया था। इस प्रकार लिटएलिमेंट को वेब घटकों को बनाने के लिए एक हल्के और उपयोग में आसान ढांचे के रूप में डिजाइन किया गया था।
वर्ष 2018 में, लिट एलिमेंट को गूगल क्रोम टीम द्वारा बड़े पॉलिमर (लाइब्रेरी) प्रोजेक्ट के हिस्से के रूप में विकसित किया गया था। इस प्रकार लिटएलिमेंट को वेब घटकों को बनाने के लिए हल्के और उपयोग में आसान ढांचे के रूप में डिजाइन किया गया था।


== संदर्भ ==
== संदर्भ ==
Line 66: Line 66:
}}
}}
== बाहरी संबंध ==
== बाहरी संबंध ==
*{{official website}}
*[https://www.webcomponents.org/ Official Website]
**{{GitHub|वेबघटक}}
**{{GitHub|वेबघटक}}
*[https://wicg.github.io/webcomponents/ वेब घटक विशिष्टताएँ] [[WICG|डब्ल्यूआईसीजी]]
*[https://wicg.github.io/webcomponents/ वेब घटक विशिष्टताएँ] [[WICG|डब्ल्यूआईसीजी]]
Line 78: Line 78:


{{W3C standards}}
{{W3C standards}}
[[Category: वेब मानक]] [[Category: वेब प्रोग्रामिंग]]


 
[[Category:CS1 English-language sources (en)]]
 
[[Category:Collapse templates]]
[[Category: Machine Translated Page]]
[[Category:Created On 07/07/2023]]
[[Category:Created On 07/07/2023]]
[[Category:Machine Translated Page]]
[[Category:Navigational boxes| ]]
[[Category:Navigational boxes without horizontal lists]]
[[Category:Official website missing URL]]
[[Category:Pages with script errors]]
[[Category:Sidebars with styles needing conversion]]
[[Category:Template documentation pages|Documentation/doc]]
[[Category:Templates Vigyan Ready]]
[[Category:Templates generating microformats]]
[[Category:Templates that are not mobile friendly]]
[[Category:Templates using TemplateData]]
[[Category:Wikipedia metatemplates]]

Latest revision as of 17:08, 28 July 2023

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

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

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

विशेषताएँ

कस्टम तत्व

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

छाया डीओएम

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

किसी तत्व में स्कोप्ड सबट्री को छाया वृक्ष कहा जाता है। छाया वृक्ष जिस तत्व से जुड़ा होता है उसे छाया होस्ट कहा जाता है।[6]

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

एचटीएमएल टेम्पलेट

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

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

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

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

वेब घटक सभी प्रमुख ब्राउज़रों के वर्तमान संस्करणों द्वारा समर्थित हैं।[9]

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

पुस्तकालय

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

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

समुदाय

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

इतिहास

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

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

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

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

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

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

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

संदर्भ

  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=229449’