HTML Web Components
In this page:
class ElementName extends HTMLElement {
connectedCallback() {
this.innerHTML = "content";
}
}
customElements.define("element-name", ElementName);Web Components क्या हैं?
Web Components मॉडर्न वेब APIs का एक सेट हैं जो डेवलपर्स को ऐसे कस्टम, फिर से इस्तेमाल किए जा सकने वाले, और एनकैप्सुलेटेड HTML एलिमेंट्स बनाने देते हैं जो सभी वेब एप्लिकेशन्स में नेटिव रूप से काम करते हैं।
उदाहरण: What are Web Components?
<my-widget></my-widget>Shadow DOM
Shadow DOM आपके कस्टम कंपोनेंट को अपना एक अलग, आइसोलेटेड DOM ट्री रखने देता है जो मुख्य पेज से पूरी तरह अलग होता है।
यह सुनिश्चित करता है कि आपके कंपोनेंट के अंदर की स्टाइल्स बाहर लीक न हों, और मुख्य पेज की स्टाइल्स गलती से आपके कंपोनेंट को न तोड़ें।
उदाहरण: The Shadow DOM
<script>
class MyWidget extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
</script>Custom Elements API
Custom Elements API का उपयोग आपके कस्टम HTML टैग्स को ब्राउज़र के साथ रजिस्टर करने के लिए किया जाता है। आप एक JavaScript क्लास लिखते हैं जो स्टैंडर्ड HTMLElement क्लास को एक्सटेंड करती है, और यह परिभाषित करती है कि जब आपका कस्टम टैग कॉल किया जाए तो कौन-सा HTML और स्टाइल्स रेंडर होने चाहिए।
उदाहरण: The Custom Elements API
<script>
class MyWidget extends HTMLElement {}
window.customElements.define('my-widget', MyWidget);
</script>
<my-widget></my-widget>कंपोनेंट Attributes
आप स्टैंडर्ड HTML एट्रिब्यूट्स का उपयोग करके अपने Web Components को कस्टम डेटा वैल्यूज़ पास कर सकते हैं। इन एट्रिब्यूट्स में बदलावों को ऑब्ज़र्व और सुनकर, आप अपने कंपोनेंट को डायनामिक रूप से अपडेट कर सकते हैं।
उदाहरण: Component Attributes
<my-widget color="blue"></my-widget>
<script>
class MyWidget extends HTMLElement {
static get observedAttributes() { return ['color']; }
attributeChangedCallback(name, oldVal, newVal) {
console.log(name, newVal);
}
}
</script>कंपोनेंट Templates
अपने कंपोनेंट के HTML मार्कअप को सीधे JavaScript स्ट्रिंग्स के अंदर लिखना अस्त-व्यस्त और मेंटेन करना मुश्किल हो सकता है।
template एलिमेंट का उपयोग करने से आप अपने कंपोनेंट के मार्कअप को अपनी HTML फाइल में साफ-सुथरे तरीके से परिभाषित कर सकते हैं, और जब आपकी कंपोनेंट क्लास चले तब उसे क्लोन कर सकते हैं।
उदाहरण: Component Templates
<template id="widget-template">
<p>Reusable markup</p>
</template>
<script>
const clone = document.getElementById('widget-template').content.cloneNode(true);
</script>Custom Element Lifecycle Callbacks
कस्टम एलिमेंट्स खास lifecycle मेथड्स सपोर्ट करते हैं जो अहम पलों पर अपने-आप चलते हैं: connectedCallback तब चलता है जब एलिमेंट पेज में जोड़ा जाता है, disconnectedCallback तब चलता है जब उसे हटाया जाता है, और attributeChangedCallback तब चलता है जब भी उसके निगरानी में रखे किसी एट्रिब्यूट की वैल्यू बदलती है।
उदाहरण: Custom Element Lifecycle Callbacks
<script>
class MyWidget extends HTMLElement {
connectedCallback() { console.log('added to page'); }
disconnectedCallback() { console.log('removed from page'); }
}
</script>ब्राउज़र सपोर्ट और Polyfills
Custom elements और Shadow DOM, Chrome, Firefox, Safari, और Edge समेत सभी मॉडर्न ब्राउज़र्स में सपोर्टेड हैं, लेकिन Internet Explorer 11 जैसे बेहद पुराने ब्राउज़र्स इन्हें बिल्कुल भी सपोर्ट नहीं करते।
ऐसे पुराने ब्राउज़र्स को सपोर्ट करना ज़रूरी होने वाले प्रोजेक्ट्स के लिए, polyfill लाइब्रेरीज़ कुछ सीमाओं के साथ लगभग वैसा ही सपोर्ट जोड़ सकती हैं।
उदाहरण: Browser Support and Polyfills
<script src="webcomponents-loader.js"></script>
<my-widget></my-widget>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: