JavaScript Academy · पाठ

Shadow DOM और समावेशन

Shadow roots में शैलियों और मार्कअप को अलग रखिए।

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

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

Shadow DOM क्या है

Shadow DOM किसी एलिमेंट को एक निजी, समाहित DOM ट्री देता है। इसके अंदर का मार्कअप और शैलियाँ पृष्ठ के बाकी हिस्से से अलग रहती हैं।

बाहर की CSS अंदर प्रवेश नहीं करती।
अंदर की CSS बाहर नहीं फैलती।
आंतरिक संरचना सामान्य DOM क्वेरी से छिपी रहती है।

attachShadow

आप this.attachShadow({ mode: 'open' }) कॉल करके एक Shadow ट्री बनाते हैं। यह एक shadow root लौटाता है, जिसमें आप सामान्य नोड की तरह सामग्री भर सकते हैं।

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

ओपन बनाम क्लोज़्ड मोड

mode विकल्प यह नियंत्रित करता है कि बाहर से कितनी पहुँच होगी:

'open' — रूट element.shadowRoot के ज़रिए उपलब्ध होता है।
'closed' — element.shadowRoot null लौटाता है; केवल आपका कोड इसका संदर्भ रखता है।

आसान डीबगिंग के लिए अधिकांश कॉम्पोनेंट 'open' का उपयोग करते हैं।

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Shadow रूट में सामग्री भरना

समाहित सामग्री बनाने के लिए shadowRoot.innerHTML सेट कीजिए। यह मार्कअप document.querySelector को दिखाई नहीं देता।

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

सीमित शैलियाँ

Shadow रूट के अंदर मौजूद style टैग केवल उसी रूट को प्रभावित करता है। कॉम्पोनेंट के बाहर मौजूद वही चयनक अप्रभावित रहता है और पृष्ठ की शैलियाँ अंदर नहीं आतीं।

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

:host चयनक

Shadow शैलियों के अंदर :host स्वयं कस्टम एलिमेंट को लक्षित करता है, जो Shadow ट्री का होस्ट होता है। कॉम्पोनेंट के बाहरी बॉक्स की शैली तय करने के लिए इसका उपयोग कीजिए।

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

व्यवहार में शैली पृथक्करण

समावेशन का अर्थ है कि कॉम्पोनेंट बनाने वाले और पृष्ठ बनाने वाले लोग वर्ग नामों को लेकर एक-दूसरे से नहीं टकराते। एक कॉम्पोनेंट के अंदर का .title नियम कहीं और मौजूद .title को कभी प्रभावित नहीं करता।

वैश्विक CSS टकराव नहीं होते।
सरल और सामान्य चयनक फिर से सुरक्षित होते हैं।

Shadow रूट के अंदर क्वेरी करना

आंतरिक नोड तक पहुँचने के लिए दस्तावेज़ में नहीं, बल्कि Shadow रूट में क्वेरी कीजिए। Shadow रूट भी वही क्वेरी विधियाँ समर्थित करता है।

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

इवेंट सीमा पार करते हैं

कई इवेंट, जैसे click, Shadow DOM से बाहर बबल होते हैं, लेकिन उन्हें retargeted किया जाता है। इसलिए बाहर के लिसनर को आंतरिक नोड के बजाय होस्ट एलिमेंट दिखाई देता है। इससे समावेशन बना रहता है।

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

विरासत में मिलने वाली शैलियाँ

कुछ CSS प्रॉपर्टी, जैसे color और font-family, Shadow सीमा के पार विरासत में मिलती हैं, क्योंकि विरासत कंपोज़्ड ट्री में नीचे की ओर प्रवाहित होती है। आप विरासत पर निर्भर रहकर या CSS कस्टम प्रॉपर्टी का उपयोग करके पृष्ठ के रूप-रंग को अपना सकते हैं।

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Shadow DOM का उपयोग कब करें

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

त्वरित जाँच

Shadow DOM की अपनी समझ जाँचिए।

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

पुनरावलोकन

आपने Shadow DOM के बारे में सीखा:

attachShadow({ mode }) एक अलग-थलग ट्री बनाता है।
'open' shadowRoot को उपलब्ध कराता है; 'closed' इसे छिपा देता है।
आंतरिक style टैग सीमित होते हैं; :host स्वयं एलिमेंट की शैली तय करता है।
क्वेरी दस्तावेज़ पर नहीं, बल्कि Shadow रूट पर चलाई जाती हैं।
समावेशन बनाए रखने के लिए इवेंट का लक्ष्य बदला जाता है।

अगले भाग में, हम टेम्पलेट और स्लॉट की सहायता से मार्कअप का पुनः उपयोग करेंगे।

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

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

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

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

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

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

क्या “Shadow DOM और समावेशन” पाठ निःशुल्क है?

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

“Shadow DOM और समावेशन” में मैं क्या सीखूँगा?

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

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

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

“Shadow DOM और समावेशन” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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