स्कोप की गई रजिस्ट्री के साथ कस्टम एलिमेंट का इस्तेमाल करना

Jayson Chen

Patrick Brosset

पब्लिश होने की तारीख: 9 मार्च, 2026

कस्टम एलिमेंट की मदद से, वेब ऐप्लिकेशन डेवलपर यूआई कॉम्पोनेंट बना सकते हैं, उन्हें शेयर कर सकते हैं, और फिर से इस्तेमाल कर सकते हैं. इन कॉम्पोनेंट के काम करने का तरीका यूनीक होता है, जिससे डेवलपमेंट आसान हो जाता है. हालांकि, जब आपका ऐप्लिकेशन कस्टम एलिमेंट के अलग-अलग सेट को एक साथ लाता है, तो चीज़ें गड़बड़ हो सकती हैं और नाम के टकराव हो सकते हैं. स्कोप की गई कस्टम एलिमेंट रजिस्ट्री से इस समस्या को हल किया जा सकता है!

Microsoft Edge की टीम ने इस सुविधा पर काम किया है. हमें यह बताते हुए खुशी हो रही है कि स्कोप किए गए कस्टम एलिमेंट रजिस्टर, अब Edge और Chrome 146 के साथ-साथ Chromium पर आधारित अन्य ब्राउज़र में डिफ़ॉल्ट रूप से उपलब्ध हैं. अब कस्टम एलिमेंट को इनकैप्सुलेट किया जा सकता है. इससे कॉम्पोनेंट और माइक्रो-फ़्रंटएंड लाइब्रेरी के डेवलपर की एक पुरानी समस्या हल हो गई है.

स्कोप किए गए कस्टम एलिमेंट रजिस्टर करने की सुविधा, वेब डेवलपर के लिए अहम पैटर्न अनलॉक करती है. अब एक साथ कई कस्टम एलिमेंट लाइब्रेरी का इस्तेमाल किया जा सकता है. इन्हें अलग-अलग टीमों ने बनाया होता है. इसके अलावा, एक ही लाइब्रेरी के कई वर्शन का इस्तेमाल भी एक साथ किया जा सकता है.

स्कोप की गई कस्टम एलिमेंट रजिस्ट्री क्या होती है?

आजकल, किसी वेबपेज पर मौजूद हर कस्टम एलिमेंट की परिभाषा, window.customElements पर मौजूद एक ही शेयर की गई रजिस्ट्री में होती है. इसका मतलब है कि अगर दो अलग-अलग लाइब्रेरी, एक ही टैग नेम (जैसे, <my-button>) वाले कस्टम एलिमेंट को तय करने की कोशिश करती हैं, तो एक गड़बड़ी दिखेगी और पेज काम नहीं करेगा. असल दुनिया में यह एक बड़ी समस्या है. बड़े ऐप्लिकेशन के यूज़र इंटरफ़ेस को कई टीमें, डिज़ाइन सिस्टम या माइक्रो-फ़्रंटएंड बनाते हैं. इसलिए, इनके नाम आपस में टकरा सकते हैं. स्कोप की गई कस्टम एलिमेंट रजिस्ट्री, इस समस्या को हल करती हैं. इनकी मदद से, इंडिपेंडेंट रजिस्ट्री बनाई जा सकती हैं. हर रजिस्ट्री, कस्टम एलिमेंट की परिभाषाओं का अपना सेट बनाए रखती है. यह ग्लोबल रजिस्ट्री और एक-दूसरे से पूरी तरह अलग होता है.

नई रजिस्ट्री बनाना

ग्लोबल window.customElements रजिस्ट्री में हर कस्टम एलिमेंट को तय करने के बजाय:

1. new CustomElementRegistry() को कॉल करके, नई रजिस्ट्री बनाएं.
2. अपनी नई रजिस्ट्री को कोई स्कोप दें. इसके लिए, अपनी रजिस्ट्री को स्कोप करना लेख पढ़ें.
3. उन एलिमेंट के बारे में बताएं जिन्हें नई रजिस्ट्री में शामिल करना है.

इसके बाद, जब किसी कस्टम एलिमेंट का इस्तेमाल किया जाता है, तो ब्राउज़र उससे जुड़ी रजिस्ट्री से एलिमेंट की परिभाषा ढूंढता है. यह ज़रूरी नहीं है कि यह रजिस्ट्री ग्लोबल हो. इसका मतलब है कि आपके पेज के अलग-अलग हिस्सों में, कस्टम एलिमेंट की परिभाषाओं के पूरी तरह से अलग सेट इस्तेमाल किए जा सकते हैं.

अपनी रजिस्ट्री का दायरा तय करना

कस्टम एलिमेंट रजिस्ट्री को किसी दस्तावेज़, शैडो रूट या किसी एलिमेंट के स्कोप में रखा जा सकता है.

शैडो रूट का स्कोप

किसी नई रजिस्ट्री को शैडो रूट के स्कोप में लाने के लिए, attachShadow() तरीके को कॉल करते समय customElementRegistry विकल्प का इस्तेमाल करें. शेडो रूट में मौजूद सभी कस्टम एलिमेंट अब उस स्कोप की गई रजिस्ट्री में मौजूद डेफ़िनिशन का इस्तेमाल करेंगे:

// Create your custom registry.
const registry = new CustomElementRegistry();
// Define a custom element in the new registry.
registry.define('my-card', class extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from scoped registry!';
  }
});

// Create shadow root, providing it with your new custom element registry.
const host = document.querySelector('#host');
const shadow = host.attachShadow({
  mode: 'open',
  customElementRegistry: registry,
});

shadow.innerHTML = '<my-card></my-card>';

डिक्लेरेटिव शैडो डीओएम

<template> एलिमेंट पर shadowrootcustomelementregistry एट्रिब्यूट का इस्तेमाल करके, ब्राउज़र को यह बताएं कि नतीजा देने वाला शैडो रूट, ग्लोबल रजिस्ट्री के बजाय स्कोप की गई रजिस्ट्री का इस्तेमाल कर रहा है:

<my-host>
  <template shadowrootmode="open" shadowrootcustomelementregistry>
    <my-widget></my-widget>
  </template>
</my-host>

  const registry = new CustomElementRegistry();
  registry.define('my-widget', class extends HTMLElement {
    connectedCallback() { this.textContent = 'Scoped!'; }
  });

  const shadow = document.querySelector('my-host').shadowRoot;
  registry.initialize(shadow);

उदाहरण में दिखाए गए तरीके से, यह एट्रिब्यूट कस्टम एलिमेंट रजिस्ट्री के लिए जगह रिज़र्व करता है. साथ ही, उपयोगकर्ता को रजिस्ट्री को परिभाषित और शुरू करना होता है, ताकि शैडो रूट स्कोपिंग को किसी डिसकनेक्ट किए गए दस्तावेज़ पर लागू किया जा सके

किसी रजिस्ट्री को किसी दस्तावेज़ के स्कोप में भी रखा जा सकता है. जैसे, document.implementation.createHTMLDocument() से बनाया गया कोई दस्तावेज़. इससे आपको <template> एलिमेंट को क्लोन करने और स्क्रीन से बाहर के दस्तावेज़ में बदलाव करने की सुविधा मिलती है. हर बदलाव के लिए, कॉम्पोनेंट की परिभाषाओं का अलग सेट होता है. इसके लिए, CustomElementRegistry.initialize() तरीके का इस्तेमाल करें:

// Create a new registry.
const registry = new CustomElementRegistry();
registry.define('app-widget', AppWidget);

// Create a document, and use registry.initialize() to scope the registry to the document.
const doc = document.implementation.createHTMLDocument('');
registry.initialize(doc);

doc.body.innerHTML = '<app-widget></app-widget>';

किसी एलिमेंट के लिए स्कोप

customElementRegistry विकल्प को document.createElement() में पास करके, किसी रजिस्ट्री को सीधे तौर पर किसी एलिमेंट और उसके सबट्री से भी जोड़ा जा सकता है. यह एलिमेंट और इसके डिसेंडेंट, उस रजिस्ट्री के हिसाब से काम करेंगे. भले ही, उन्हें बाद में डीओएम के किसी भी हिस्से में डाला जाए:

// Create a registry and define a custom element in it.
const registry = new CustomElementRegistry();
registry.define('fancy-label', FancyLabel);

// Create a new DOM element and scope the new registry to it.
const el = document.createElement('fancy-input', {
  customElementRegistry: registry,
});

// Use a custom element in the new DOM element.
el.innerHTML = '<fancy-label>Name</fancy-label>';

ज़्यादा जानें

ज़्यादा जानने के लिए, Edge का डेमो और इसका सोर्स कोड देखें. साथ ही, MDN का CustomElementRegistry रेफ़रंस लेख पढ़ें

स्कोप किए गए कस्टम एलिमेंट रजिस्टर अब Microsoft Edge और Chrome, दोनों में डिफ़ॉल्ट रूप से चालू होते हैं. साथ ही, Chromium पर आधारित अन्य ब्राउज़र में भी यह सुविधा डिफ़ॉल्ट रूप से चालू होती है. ऐसा Chromium प्रोजेक्ट के साथ मिलकर काम करने की वजह से हुआ है.

आपको किसी सेटिंग को चालू करने या ऑरिजिन ट्रायल के लिए साइन-अप करने की ज़रूरत नहीं है. Chromium पर आधारित ब्राउज़र में, आज से ही इस सुविधा का इस्तेमाल किया जा सकता है.

अगर आपको यह सुविधा अन्य ब्राउज़र में लागू करनी है, तो स्कोप किए गए कस्टम एलिमेंट रजिस्टर करने से जुड़ी समस्या को पसंद करें. साथ ही, अपने इस्तेमाल के उदाहरण और समस्या हल करने के तरीके के बारे में टिप्पणी करें.

अगर आपको Chromium पर आधारित किसी ब्राउज़र में इस सुविधा को लागू करने में कोई गड़बड़ी मिलती है, तो हमें इसकी जानकारी दें. हम इसकी जांच करेंगे. इसके लिए, crbug.com/new पर जाएं.

हमें उम्मीद है कि स्कोप की गई कस्टम एलिमेंट रजिस्ट्री से, वेब कॉम्पोनेंट का इस्तेमाल करना आसान हो जाएगा.