JavaScript Academy · पाठ

कस्टम तत्व परिभाषित करना

customElements API से तत्व रजिस्टर कीजिए।

पाठ 1, कुल 4 में से13 चरण

कस्टम तत्व परिभाषित करना, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

कस्टम एलिमेंट क्या हैं

कस्टम एलिमेंट आपको JavaScript क्लासों की मदद से अपने HTML टैग परिभाषित करने देते हैं। div के ढेर को जोड़ने के बजाय आप <user-card> जैसे पुन: उपयोग किए जा सकने वाले, स्व-निहित कॉम्पोनेंट बना सकते हैं।

वे वेब कॉम्पोनेंट्स मानक का हिस्सा हैं।
वे ब्राउज़र में मूल रूप से काम करते हैं; किसी फ़्रेमवर्क की आवश्यकता नहीं होती।
कस्टम एलिमेंट के नाम में हाइफ़न होना अनिवार्य है (जैसे my-button)।

customElements रजिस्ट्री

ब्राउज़र window.customElements पर एक ग्लोबल रजिस्ट्री उपलब्ध कराता है। customElements.define(name, constructor) कॉल करके नया टैग रजिस्टर करें।

परिभाषित होने के बाद, दस्तावेज़ में मौजूद हर मेल खाता टैग आपकी क्लास के एक इंस्टेंस में अपग्रेड हो जाता है।

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

HTMLElement का विस्तार करना

कस्टम एलिमेंट एक ऐसी क्लास है जो extends HTMLElement करती है। बेस क्लास आपके एलिमेंट को सभी मानक DOM क्षमताएँ (एट्रिब्यूट, इवेंट और स्टाइलिंग) देती है।

कन्स्ट्रक्टर में हमेशा पहले super() कॉल करें, ताकि एलिमेंट सही ढंग से इनिशियलाइज़ हो जाए।

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

सामग्री रेंडर करना

एलिमेंट के भीतर आप this.innerHTML सेट कर सकते हैं या सामग्री बनाने के लिए DOM विधियों का उपयोग कर सकते हैं। एक सामान्य तरीका यह है कि एलिमेंट के पृष्ठ से जुड़ने पर सामग्री रेंडर की जाए।

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

HTML में एलिमेंट का उपयोग करना

रजिस्ट्रेशन के बाद अपने टैग का उपयोग किसी भी अंतर्निर्मित एलिमेंट की तरह करें। आप इसे सीधे मार्कअप में रख सकते हैं या document.createElement से बना सकते हैं।

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

कन्स्ट्रक्टर के नियम

कन्स्ट्रक्टर तब चलता है जब कोई इंस्टेंस बनाया जाता है। इसके कुछ सख्त नियम हैं:

पहले super() कॉल करें।
यहाँ एट्रिब्यूट या चाइल्ड एलिमेंट की जाँच या उन्हें जोड़ना न करें।
DOM का काम connectedCallback तक टाल दें।

कन्स्ट्रक्टर का उपयोग केवल शुरुआती स्थिति और इवेंट लिस्नर सेटअप के लिए करें।

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

व्यवहार जोड़ना

चूँकि आपका एलिमेंट एक वास्तविक DOM नोड है, इसलिए आप उसमें इवेंट लिसनर जोड़ सकते हैं और इंटरैक्शन के जवाब में उसकी सामग्री अपडेट कर सकते हैं।

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

हाइफ़न की आवश्यकता

कस्टम एलिमेंट के नामों में डैश होना आवश्यक है। इससे यह सुनिश्चित होता है कि उनका नाम वर्तमान या भविष्य के अंतर्निहित HTML एलिमेंट से कभी न टकराए।

my-widget मान्य है।
mywidget अमान्य है और एक त्रुटि उत्पन्न करता है।
नाम बड़े और छोटे अक्षरों में भेद नहीं करते, लेकिन उन्हें छोटे अक्षरों में लिखा जाता है।

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined और get

रजिस्ट्री की दो उपयोगी विधियाँ:

customElements.get(name) कंस्ट्रक्टर लौटाता है, या पंजीकृत न होने पर undefined लौटाता है।
customElements.whenDefined(name) एक प्रॉमिस लौटाता है, जो एलिमेंट के परिभाषित होने पर पूरा होता है।

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

केवल एक बार परिभाषित करना

हर नाम को केवल एक बार पंजीकृत किया जा सकता है। पहले से उपयोग किए गए नाम के साथ define कॉल करने पर त्रुटि उत्पन्न होती है। साझा मॉड्यूल में दो बार पंजीकरण होने से बचाव कीजिए।

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

कस्टम एलिमेंट क्यों महत्वपूर्ण हैं

कस्टम एलिमेंट आपको किसी भी फ़्रेमवर्क से स्वतंत्र, समाहित और पुनः उपयोग योग्य यूआई देते हैं। वे:

किसी भी तकनीकी स्टैक में कॉम्पोनेंट के पुनः उपयोग को मानकीकृत करते हैं।
ब्राउज़र के अपने जीवनचक्र के साथ एकीकृत होते हैं।
Shadow DOM और टेम्पलेट के साथ स्वाभाविक रूप से काम करते हैं, जिनके बारे में आगे बताया जाएगा।

त्वरित जाँच

कस्टम एलिमेंट परिभाषित करने की अपनी समझ जाँचिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने कस्टम एलिमेंट परिभाषित करना सीखा:

customElements.define(name, class) एक टैग पंजीकृत करता है।
वर्ग extends HTMLElement का विस्तार करता है और सबसे पहले super() कॉल करता है।
नामों में हाइफ़न होना आवश्यक है।
सामग्री को कंस्ट्रक्टर में नहीं, बल्कि connectedCallback में रेंडर कीजिए।
get और whenDefined आपको पंजीकरण की स्थिति जाँचने में सहायता करते हैं।

अगले भाग में, हम कस्टम एलिमेंट के पूरे जीवनचक्र का अध्ययन करेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 59
पाठ: 200

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “कस्टम तत्व परिभाषित करना” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “कस्टम तत्व परिभाषित करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“कस्टम तत्व परिभाषित करना” में मैं क्या सीखूँगा?

customElements API से तत्व रजिस्टर कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“कस्टम तत्व परिभाषित करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← JavaScript Academy पर वापस जाएँ