Articles
जावास्क्रिप्ट का परिचय
शैडो DOM क्या है?

शैडो DOM क्या है?

यह लेख शैडो DOM क्या है, यह समझाता है।

YouTube Video

शैडो DOM को समझना

शैडो DOM वेब कंपोनेंट्स मानक की एक शक्तिशाली विशेषता है, जो कंपोनेंट्स के भीतर स्टाइल और DOM संरचना का एनकैप्सुलेशन सक्षम करता है। यह विशेषता कंपोनेंट्स और मुख्य दस्तावेज़ के बीच स्टाइल और स्क्रिप्ट के हस्तक्षेप को रोकती है।

शैडो DOM क्या है?

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

उदाहरण के लिए, यदि आप शैडो DOM का उपयोग करके एक कस्टम बटन कंपोनेंट बनाते हैं, तो इसकी स्टाइल्स पेज पर अन्य एलिमेंट्स से टकराएंगी नहीं। इसी तरह, समान क्लास नाम वाले एलिमेंट्स में कोई टकराव नहीं होगा।

शैडो DOM के लाभ

  1. एनकैप्सुलेशन: शैडो DOM स्टाइल और कार्यक्षमता को अलग करता है, वैश्विक स्टाइल और स्क्रिप्ट के साथ टकराव को रोकता है।

  2. पुनः उपयोगिता: शैडो DOM के साथ बनाए गए कंपोनेंट्स को विभिन्न परियोजनाओं में स्टाइल टकराव की चिंता किए बिना पुनः उपयोग किया जा सकता है।

  3. संवर्धनीयता: एनकैप्सुलेशन कंपोनेंट्स को तर्क और स्टाइल के दायरे में आत्मनिर्भर बनाता है, जिससे समस्या निवारण और रखरखाव आसान हो जाता है।

शैडो DOM बनाना

शैडो DOM का उपयोग करने के लिए, आपको एक HTML एलिमेंट में शैडो रूट को जोड़ने की आवश्यकता होती है। यहां एक साधारण उदाहरण दिया गया हैः।

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

व्याख्या

  1. होस्ट एलिमेंट: एक सामान्य DOM एलिमेंट जिससे शैडो रूट जुड़ा होता है (इस मामले में #shadow-host)।

  2. शैडो रूट: attachShadow का उपयोग करके बनाए गए शैडो ट्री की जड़।

  3. मोड: open मोड में, बाहरी जावास्क्रिप्ट element.shadowRoot के माध्यम से शैडो रूट तक पहुंच सकता है। दूसरी ओर, closed मोड पहुंच की अनुमति नहीं देता है।

शैडो DOM के भीतर स्टाइलिंग

शैडो डोम की अपनी स्टाइल सीमा होती है। शैडो ट्री में निर्धारित स्टाइल केवल उसी ट्री के अंदर मौजूद एलिमेंट्स पर लागू होती है। यहाँ एक उदाहरण है:।

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

मुख्य दस्तावेज़ में भले ही विरोधाभासी शैलियाँ हों, शैडो ट्री के अंदर पैराग्राफ अप्रभावित रहते हैं:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

शैडो डोम के अंदर पैराग्राफ हरे रहते हैं, जबकि बाहरी पैराग्राफ लाल होते हैं।

शैडो डोम के भीतर घटनाएँ

शैडो डोम के भीतर की घटनाएँ साधारण DOM घटनाओं के समान होती हैं, लेकिन एन्कैप्सुलेशन के कारण प्रसार के संदर्भ में उनका व्यवहार अलग हो सकता है। शैडो ट्री के भीतर होने वाली घटनाएँ होस्ट एलिमेंट तक बुलबुला कर सकती हैं, लेकिन सीधे पूरे दस्तावेज़ तक नहीं पहुँचती हैं।

यहाँ एक उदाहरण है:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

जब बटन पर क्लिक किया जाता है, तो दोनों श्रोताओं को सक्रिय किया जाता है, जो इवेंट बबलिंग के व्यवहार को प्रदर्शित करता है।

स्लॉट: लाइट DOM कंटेंट का वितरण

स्लॉट आपको लाइट DOM से कंटेंट को शैडो डोम में प्रोजेक्ट करने में सक्षम बनाते हैं। यहाँ एक उदाहरण है:।

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

मुख्य दस्तावेज़ में, आप निम्नलिखित कर सकते हैं:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

शैडो डोम के भीतर स्लॉट तत्व संबंधित स्लॉट गुण के साथ लाइट DOM कंटेंट प्रदर्शित करते हैं।

निष्कर्ष

शैडो डोम मज़बूत, पुन: प्रयोज्य, और अनुरक्षित वेब घटकों को बनाने का एक महत्वपूर्ण उपकरण है। स्टाइल और कार्यक्षमता को एन्कैप्सुलेट करके, यह संघर्ष की संभावना को कम करता है और कोडबेस प्रबंधन को सरल बनाता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

जावास्क्रिप्ट और HTML