वेब घटक - Revision history

Manidh at 11:38, 28 July 2023

2023-07-28T11:38:17Z

← Older revision		Revision as of 17:08, 28 July 2023
Line 79:		Line 79:
	{{W3C standards}}		{{W3C standards}}

			[[Category:CS1 English-language sources (en)]]
	[[Category:Collapse templates]]		[[Category:Collapse templates]]
	[[Category:Created On 07/07/2023]]		[[Category:Created On 07/07/2023]]
Line 89:		Line 90:
	[[Category:Template documentation pages\|Documentation/doc]]		[[Category:Template documentation pages\|Documentation/doc]]
	[[Category:Templates Vigyan Ready]]		[[Category:Templates Vigyan Ready]]
	[[Category:~~Vigyan Ready~~]]		[[Category:Templates generating microformats]]
			[[Category:Templates that are not mobile friendly]]
			[[Category:Templates using TemplateData]]
			[[Category:Wikipedia metatemplates]]

Indicwiki: 11 revisions imported from :alpha:वेब_घटक

2023-07-21T07:16:59Z

11 revisions imported from alpha:वेब_घटक

← Older revision	Revision as of 12:46, 21 July 2023
(No difference)

alpha>Neeraja: added Category:Vigyan Ready using HotCat

2023-07-20T06:19:43Z

added Category:Vigyan Ready using HotCat

← Older revision		Revision as of 11:49, 20 July 2023
Line 89:		Line 89:
	[[Category:Template documentation pages\|Documentation/doc]]		[[Category:Template documentation pages\|Documentation/doc]]
	[[Category:Templates Vigyan Ready]]		[[Category:Templates Vigyan Ready]]
			[[Category:Vigyan Ready]]

alpha>Neeraja: /* बाहरी संबंध */

2023-07-20T06:19:36Z

बाहरी संबंध

← Older revision		Revision as of 11:49, 20 July 2023
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: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]]

alpha>Ajays at 05:35, 17 July 2023

2023-07-17T05:35:00Z

Show changes

alpha>Ajays at 09:51, 16 July 2023

2023-07-16T09:51:04Z

Show changes

alpha>Ajays at 09:42, 16 July 2023

2023-07-16T09:42:10Z

← Older revision		Revision as of 15:12, 16 July 2023
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>
	; कस्टम तत्व		; कस्टम तत्व
	: नए एचटीएमएल तत्वों को परिभाषित करने के लिए एपीआई		: नए एचटीएमएल तत्वों को परिभाषित करने के लिए एपीआई
	; छाया डोम		; छाया डोम
	: संपुटित ~~DOM~~ और स्टाइल, रचना के साथ		: संपुटित डीओएम और स्टाइल, रचना के साथ
	; एचटीएमएल टेम्प्लेट		; एचटीएमएल टेम्प्लेट
	: एचटीएमएल टुकड़े जो प्रस्तुत नहीं किए गए हैं, किन्तु जावास्क्रिप्ट के माध्यम से तत्काल होने तक संग्रहीत किए गए हैं<ref>{{cite web \|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template \|title=<nowiki><template></nowiki>: The Content Template element		: एचटीएमएल टुकड़े जो प्रस्तुत नहीं किए गए हैं, किन्तु जावास्क्रिप्ट के माध्यम से तत्काल होने तक संग्रहीत किए गए हैं<ref>{{cite web \|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template \|title=<nowiki><template></nowiki>: The Content Template element
Line 14:		Line 14:
	=== कस्टम तत्व===		=== कस्टम तत्व===
	कस्टम तत्वों के दो भाग हैं: स्वायत्त कस्टम तत्व और अनुकूलित अंतर्निहित तत्व। स्वायत्त कस्टम तत्व [[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>
	=== छाया ~~डोम~~ ===		=== छाया डीओएम ===
	शैडो ~~DOM~~ एक कार्यक्षमता है जो [[वेब ब्राउज़र]] को [[दस्तावेज़ ऑब्जेक्ट मॉडल]] तत्वों को मुख्य दस्तावेज़ ~~DOM~~ ट्री में डाले बिना प्रस्तुत करने की अनुमति देती है। यह डेवलपर और ब्राउज़र तक पहुँचने के समूह एक अवरोध उत्पन्न करता है; डेवलपर शैडो ~~DOM~~ तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के अंदर सीएसएस के सीमा का प्रभाव यह है कि एचटीएमएल तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के कठिन परिस्थिति के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। यद्यपि यह तत्व एचटीएमएल और सीएसएस के संबंध में संक्षिप्त हैं, फिर भी वे ऐसी घटनाओं को सक्रिय कर सकते हैं जिन्हें दस्तावेज़ में अन्य तत्वों द्वारा उठाया जा सकता है।<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" />
Line 59:		Line 59:
	वर्ष 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 में, लिट एलिमेंट को गूगल क्रोम टीम द्वारा बड़े पॉलिमर (लाइब्रेरी) प्रोजेक्ट के हिस्से के रूप में विकसित किया गया था। इस प्रकार लिटएलिमेंट को वेब घटकों को बनाने के लिए एक हल्के और उपयोग में आसान ढांचे के रूप में डिजाइन किया गया था।

	== संदर्भ ==		== संदर्भ ==

alpha>Ajays at 19:50, 15 July 2023

2023-07-15T19:50:36Z

Show changes

alpha>Ajays at 04:29, 15 July 2023

2023-07-15T04:29:49Z

← Older revision		Revision as of 09:59, 15 July 2023
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>
	=== छाया डोम ===		=== छाया डोम ===
	शैडो DOM एक कार्यक्षमता है जो [[वेब ब्राउज़र]] को [[दस्तावेज़ ऑब्जेक्ट मॉडल]] तत्वों को मुख्य दस्तावेज़ DOM ट्री में डाले बिना प्रस्तुत करने की अनुमति देती है। यह डेवलपर और ब्राउज़र तक पहुँचने के ~~बीच~~ एक अवरोध उत्पन्न करता है; डेवलपर शैडो DOM तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के ~~भीतर~~ सीएसएस के ~~दायरे~~ का प्रभाव यह है कि एचटीएमएल तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के कठिन परिस्थिति के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। यद्यपि ये तत्व एचटीएमएल और 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 तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के अंदर सीएसएस के सीमा का प्रभाव यह है कि एचटीएमएल तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के कठिन परिस्थिति के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। यद्यपि यह तत्व एचटीएमएल और 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>
	किसी तत्व में स्कोप्ड सबट्री को छाया वृक्ष कहा जाता है। छाया वृक्ष जिस तत्व से जुड़ा होता है उसे छाया होस्ट कहा जाता है।<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>
	=== एचटीएमएल टेम्पलेट ===		=== एचटीएमएल टेम्पलेट ===
	एचटीएमएल टेम्प्लेट एचटीएमएल के उन हिस्सों को सम्मिलित करने का एक प्रणाली है जिन पर इच्छानुसार मुहर लगाई जाती है। एचटीएमएल टेम्प्लेट का सिंटैक्स इस तरह दिखता है:		एचटीएमएल टेम्प्लेट एचटीएमएल के उन हिस्सों को सम्मिलित करने का एक प्रणाली है जिन पर इच्छानुसार मुहर लगाई जाती है। एचटीएमएल टेम्प्लेट का सिंटैक्स इस तरह दिखता है:
Line 37:		Line 37:

	== पुस्तकालय ==		== पुस्तकालय ==
	ऐसी कई लाइब्रेरी हैं जो कस्टम तत्वों को बनाते समय अमूर्तता के स्तर को बढ़ाने के उद्देश्य से वेब घटकों पर बनाई गई हैं। इनमें से कुछ लाइब्रेरी हैं [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/ टेलीपैथी]

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

	== इतिहास ==		== इतिहास ==
Line 53:		Line 53:
	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>

alpha>Ajays at 16:53, 14 July 2023

2023-07-14T16:53:13Z

← Older revision		Revision as of 22:23, 14 July 2023
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 तत्व\|~~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>
	; कस्टम तत्व		; कस्टम तत्व
	: नए ~~HTML~~ तत्वों को परिभाषित करने के लिए एपीआई		: नए एचटीएमएल तत्वों को परिभाषित करने के लिए एपीआई
	; छाया डोम		; छाया डोम
	: संपुटित DOM और स्टाइल, रचना के साथ		: संपुटित DOM और स्टाइल, रचना के साथ
	; ~~HTML~~ टेम्प्लेट		; एचटीएमएल टेम्प्लेट
	: ~~HTML~~ टुकड़े जो प्रस्तुत नहीं किए गए हैं, किन्तु जावास्क्रिप्ट के माध्यम से तत्काल होने तक संग्रहीत किए गए हैं<ref>{{cite web \|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template \|title=<nowiki><template></nowiki>: The Content Template element		: एचटीएमएल टुकड़े जो प्रस्तुत नहीं किए गए हैं, किन्तु जावास्क्रिप्ट के माध्यम से तत्काल होने तक संग्रहीत किए गए हैं<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 13:		Line 13:

	=== कस्टम तत्व===		=== कस्टम तत्व===
	कस्टम तत्वों के दो भाग हैं: स्वायत्त कस्टम तत्व और अनुकूलित अंतर्निहित तत्व। स्वायत्त कस्टम तत्व [[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\|एचटीएमएल]] तत्व हैं जो मूल एचटीएमएल तत्वों से पूरी तरह से अलग होते हैं; वे अनिवार्य रूप से कस्टम एलिमेंट्स [[अप्लिकेशन प्रोग्रामिंग अंतरफलक]] का उपयोग करके नीचे से ऊपर तक बनाए गए हैं। अनुकूलित अंतर्निर्मित तत्व वे तत्व हैं जो अपनी कार्यक्षमता का पुन: उपयोग करने के लिए मूल एचटीएमएल तत्वों पर निर्मित होते हैं।<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 तक उसी तरह नहीं पहुंच सकता है जिस तरह से वे नेस्टेड तत्वों के साथ करते हैं, जबकि ब्राउज़र उस कोड को उसी तरह प्रस्तुत और संशोधित कर सकता है जैसे वह नेस्टेड तत्वों के साथ करता है। किसी विशेष तत्व के शैडो डोम के भीतर सीएसएस के दायरे का प्रभाव यह है कि एचटीएमएल तत्वों को [[व्यापक शैली पत्रक]] शैलियों के लीक होने और उन तत्वों को प्रभावित करने के कठिन परिस्थिति के बिना एनकैप्सुलेट किया जा सकता है जिन्हें उन्हें प्रभावित नहीं करना चाहिए था। यद्यपि ये तत्व एचटीएमएल और 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>
	किसी तत्व में स्कोप्ड सबट्री को छाया वृक्ष कहा जाता है। छाया वृक्ष जिस तत्व से जुड़ा होता है उसे छाया होस्ट कहा जाता है।<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>
	=== ~~HTML~~ टेम्पलेट ===		=== एचटीएमएल टेम्पलेट ===
	~~HTML~~ टेम्प्लेट ~~HTML~~ के उन हिस्सों को सम्मिलित करने का एक प्रणाली है जिन पर इच्छानुसार मुहर लगाई जाती है। ~~HTML~~ टेम्प्लेट का सिंटैक्स इस तरह दिखता है:		एचटीएमएल टेम्प्लेट एचटीएमएल के उन हिस्सों को सम्मिलित करने का एक प्रणाली है जिन पर इच्छानुसार मुहर लगाई जाती है। एचटीएमएल टेम्प्लेट का सिंटैक्स इस तरह दिखता है:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">