अंतर्निहित एलिमेंट का विस्तार
is एट्रिब्यूट से मौजूदा एलिमेंट अनुकूलित करें
अंतर्निहित एलिमेंट का विस्तार, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
कस्टम एलिमेंट के दो प्रकार
स्पेसिफिकेशन स्वायत्त कस्टम एलिमेंट (HTMLElement का विस्तार करने वाले, जिनका उपयोग <my-card> के रूप में होता है) और अनुकूलित अंतर्निर्मित एलिमेंट (किसी विशिष्ट अंतर्निर्मित वर्ग का विस्तार करने वाले, जिनका उपयोग <button is="my-button"> के रूप में होता है) परिभाषित करता है। अनुकूलित अंतर्निर्मित एलिमेंट को अंतर्निर्मित अर्थ-व्यवहार अपने-आप मिल जाता है।
अंतर्निर्मित एलिमेंट का विस्तार क्यों करें
स्वायत्त <my-button> को अंतर्निर्मित <button> का कोई व्यवहार नहीं मिलता — Enter/Space से सक्रिय होना, फ़ॉर्म में भाग लेना या सहायक तकनीक के लिए role="button" होना, इनमें से कुछ भी नहीं। अनुकूलित बटन (is="my-button") यह सब अपने-आप प्राप्त कर लेता है।
वर्ग का विस्तार करना
HTMLElement के बजाय विशिष्ट HTML वर्ग का विस्तार करें: class MyButton extends HTMLButtonElement {}। एलिमेंट का समस्त अंतर्निर्मित व्यवहार — फ़ॉर्म सबमिशन, फ़ोकस प्रबंधन और अक्षम स्थिति — बना रहता है और आप उसके ऊपर अपने सुधार जोड़ सकते हैं।
class MyButton extends HTMLButtonElement {
connectedCallback() {
this.style.fontWeight = "bold";
}
}extends विकल्प के साथ पंजीकरण
customElements.define("my-button", MyButton, { extends: "button" })। तीसरा तर्क रजिस्ट्री को बताता है कि एलिमेंट किस अंतर्निर्मित टैग का विस्तार करता है। इसके बिना पंजीकरण विफल हो जाता है।
is विशेषता
मौजूदा टैग पर is विशेषता का उपयोग करके अनुकूलित अंतर्निर्मित एलिमेंट इस्तेमाल करें: <button is="my-button">Click</button>। इसके बजाय <my-button> लिखने पर स्वायत्त एलिमेंट बनेगा और अंतर्निर्मित व्यवहार खो जाएगा।
Safari इसका समर्थन नहीं करता
Safari ने पहुँच-सुलभता संबंधी चिंताओं का हवाला देते हुए अनुकूलित अंतर्निर्मित एलिमेंट लागू करने से इनकार किया है। ये Chrome, Edge और Firefox में काम करते हैं; Safari में is विशेषता अनदेखी कर दी जाती है और एलिमेंट साधारण <button> की तरह व्यवहार करता है। Safari समर्थन आवश्यक होने पर आधिकारिक पॉलीफ़िल का उपयोग करें।
पॉलीफ़िल विकल्प
@ungap/custom-elements पॉलीफ़िल Safari में अनुकूलित अंतर्निर्मित एलिमेंट का समर्थन वापस लाता है। यह छोटा और अच्छी तरह अनुरक्षित है; जब आपकी टीम is-विशेषता वाला तरीका छोड़े बिना विभिन्न ब्राउज़र का समर्थन चाहती हो, तब इसे शामिल करें।
स्वायत्त विकल्प
यदि पॉलीफ़िल के बिना Safari समर्थन महत्वपूर्ण है, तो इसके बजाय स्वायत्त एलिमेंट बनाएँ और आवश्यक व्यवहार को हाथ से दोहराएँ: role="button", tabindex="0", Enter/Space के लिए कुंजीपटल हैंडलर और ElementInternals API के माध्यम से फ़ॉर्म-संबद्धता जोड़ें।
फ़ॉर्म-संबद्धता API
स्वायत्त एलिमेंट static formAssociated = true सेट करके और this.attachInternals() का उपयोग करके फ़ॉर्म सबमिशन में भाग ले सकते हैं। लौटाई गई ElementInternals वस्तु पूर्ण फ़ॉर्म एकीकरण के लिए setFormValue और setValidity उपलब्ध कराती है।
किसे कब चुनें
उन कंपोनेंट के लिए अनुकूलित अंतर्निर्मित एलिमेंट चुनें जो अधिकतर किसी अंतर्निर्मित एलिमेंट जैसा व्यवहार करते हों (जैसे उन्नत बटन या बुद्धिमान इनपुट) और आपका प्लेटफ़ॉर्म Chrome/Firefox हो या आप पॉलीफ़िल स्वीकार करते हों। पूरी तरह नए कंपोनेंट (जैसे कार्ड या संवाद) जिनका कोई अंतर्निर्मित समकक्ष न हो, उनके लिए स्वायत्त एलिमेंट चुनें।
भूल: स्वायत्त बटन
वेब कंपोनेंट में सबसे सामान्य भूल <my-button> को स्वायत्त एलिमेंट बनाना है। यह फ़ॉर्म सबमिट नहीं करेगा, Enter/Space पर प्रतिक्रिया नहीं देगा और बटन के रूप में घोषित नहीं होगा। या तो HTMLButtonElement का विस्तार करें या वास्तविक बटन के हर व्यवहार को सावधानी से दोहराएँ।
ज्ञान-जाँच
बटन-जैसे कंपोनेंट के लिए HTMLElement का विस्तार करने वाले स्वायत्त एलिमेंट की तुलना में HTMLButtonElement का विस्तार करने वाले अनुकूलित अंतर्निर्मित एलिमेंट का व्यावहारिक लाभ क्या है?
सारांश
अनुकूलित अंतर्निर्मित एलिमेंट किसी विशिष्ट HTML वर्ग (HTMLButtonElement, HTMLInputElement) का विस्तार करते हैं और is विशेषता के माध्यम से उपयोग किए जाते हैं; उन्हें सभी मूल व्यवहार विरासत में मिलते हैं। उन्हें { extends: "button" } विकल्प के साथ पंजीकृत करें। Safari मूल रूप से इनका समर्थन नहीं करता — पूर्ण विभिन्न-ब्राउज़र समर्थन आवश्यक होने पर पॉलीफ़िल का उपयोग करें या हाथ से व्यवहार दोहराने वाले स्वायत्त एलिमेंट अपनाएँ।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “अंतर्निहित एलिमेंट का विस्तार” पाठ निःशुल्क है?
हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “अंतर्निहित एलिमेंट का विस्तार” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“अंतर्निहित एलिमेंट का विस्तार” में मैं क्या सीखूँगा?
is एट्रिब्यूट से मौजूदा एलिमेंट अनुकूलित करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“अंतर्निहित एलिमेंट का विस्तार” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- customElements.define से एलिमेंट परिभाषित करना
- connectedCallback और disconnectedCallback
- देखे गए एट्रिब्यूट और attributeChangedCallback
- अंतर्निहित एलिमेंट का विस्तार