"वेब घटक" और "कस्टम तत्व" अक्सर मिश्रित होते हैं, और इस प्रश्न के शीर्षक के लिए वेब खोजें अभी तक बहुत स्पष्टता नहीं लाती हैं। चलो ठीक करते हैं।
"वेब घटक" और "कस्टम तत्व" अक्सर मिश्रित होते हैं, और इस प्रश्न के शीर्षक के लिए वेब खोजें अभी तक बहुत स्पष्टता नहीं लाती हैं। चलो ठीक करते हैं।
जवाबों:
कस्टम तत्व शैडो डोम, टेम्प्लेट और HTML आयात के साथ वेब घटक मानक का एक विशिष्ट भाग हैं ।
कल्पना से:
कस्टम तत्व लेखकों के लिए अपने स्वयं के पूर्ण-चित्रित DOM तत्वों के निर्माण का एक तरीका प्रदान करते हैं। यद्यपि लेखक हमेशा अपने दस्तावेजों में गैर-मानक तत्वों का उपयोग कर सकते थे, स्क्रिप्टिंग या इसी तरह के तथ्य के बाद आवेदन-विशिष्ट व्यवहार को जोड़ा जाता था, ऐसे तत्व ऐतिहासिक रूप से गैर-अनुरूप होते हैं और बहुत कार्यात्मक नहीं होते हैं। एक कस्टम तत्व को परिभाषित करके, लेखक पार्सर को सूचित कर सकते हैं कि कैसे एक तत्व का ठीक से निर्माण किया जाए और उस वर्ग के तत्वों को परिवर्तनों पर कैसे प्रतिक्रिया देनी चाहिए।
विनिर्देश अब v1 पर है । पिछले संस्करण, V0, समर्थित किया गया था क्रोम 33 के बाद से , और एक अलग एपीआई था, का उपयोग कर document.registerElement- जो है अब पदावनत ।
कस्टम तत्व या तो स्वायत्त हो सकते हैं (खरोंच से एक नया तत्व बना सकते हैं (अर्थात, HTMLElement का विस्तार ), या किसी मौजूदा HTML तत्व (जैसे HTMLButtonElement) को अनुकूलित कर सकते हैं।
// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });customElements.define()कॉल के लिए दूसरा पैरामीटर तत्व के व्यवहार को लागू करने वाले वर्ग का नाम है। स्वायत्त तत्वों के लिए और अनुकूलित निर्मित तत्वों के लिए कल्पना में उदाहरण देखें ।
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// Draw some fancy animation effects!
});
}
}कस्टम तत्वों में मूल रूप का समर्थन कर रहे कुछ आधुनिक ब्राउज़रों , और किया जा सकता है polyfilled सफारी 7+ और IE11 के लिए वापस जा पुराने ब्राउज़र के लिए। V1 पॉलीफ़िल भी देखें ।
एक कस्टम तत्व में टेम्प्लेट और शैडो डोम का उपयोग करके, आप तत्व को संभालने और पुन: प्रयोज्य करने के लिए आसान बना सकते हैं।
टेम्पलेट कस्टम तत्वों की संरचना घोषित करने के लिए HTML का उपयोग करने की अनुमति देते हैं:
<!-- Template Definition -->
<template id="fancy-element-template">
<style>
...
</style>
<div id="container">
<p>Some fancy markup goes here...</p>
</div>
</template>
<!-- Custom Element usage -->
<fancy-element></fancy-element>शैडो डीओएम सामग्री की शैलियों, आईडी और वर्गों को स्वयं को स्कैन करने की अनुमति देता है। यह सीएसएस रक्तस्राव या इसके बाहर से कस्टम तत्व के आंतरिक तक पहुंच को रोकता है।
customElements.define('fancy-element', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const t = document.querySelector('#fancy-element-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
...
});Google डेवलपर्स लेख: