JavaScript में शैडो DOM
यह लेख JavaScript में शैडो DOM को समझाता है।
YouTube Video
javascript-html-shadow-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 h1, h2 {
32 font-size: 1.2rem;
33 color: #007bff;
34 margin-top: 0.5em;
35 margin-bottom: 0.5em;
36 border-left: 5px solid #007bff;
37 padding-left: 0.6em;
38 background-color: #e9f2ff;
39 }
40
41 button {
42 display: block;
43 margin: 1em auto;
44 padding: 0.75em 1.5em;
45 font-size: 1rem;
46 background-color: #007bff;
47 color: white;
48 border: none;
49 border-radius: 6px;
50 cursor: pointer;
51 transition: background-color 0.3s ease;
52 }
53
54 button:hover {
55 background-color: #0056b3;
56 }
57
58 #output {
59 margin-top: 1em;
60 background-color: #1e1e1e;
61 color: #0f0;
62 padding: 1em;
63 border-radius: 8px;
64 min-height: 200px;
65 font-family: Consolas, monospace;
66 font-size: 0.95rem;
67 overflow-y: auto;
68 white-space: pre-wrap;
69 }
70
71 .highlight {
72 outline: 3px solid #ffc107; /* yellow border */
73 background-color: #fff8e1; /* soft yellow background */
74 transition: background-color 0.3s ease, outline 0.3s ease;
75 }
76
77 .active {
78 background-color: #28a745; /* green background */
79 color: #fff;
80 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
81 transition: background-color 0.3s ease, box-shadow 0.3s ease;
82 }
83 </style>
84</head>
85<body>
86 <div class="container">
87 <h2>HTML Sample</h2>
88 <div id="content"></div>
89 <div id="shadow-host">Shadow Root Element</div>
90 <my-card></my-card>
91 </div>
92
93 <div class="container">
94 <h1>JavaScript Console</h1>
95 <button id="executeBtn">Execute</button>
96 <div id="output"></div>
97 </div>
98
99 <div>
100 <h2>Slot Sample</h2>
101 <my-element>
102 <h3 slot="header">Header Content</h1>
103 <p slot="content">Main Content</p>
104 </my-element>
105 </div>
106
107 <script>
108 // Override console.log to display messages in the #output element
109 (function () {
110 const originalLog = console.log;
111 console.log = function (...args) {
112 originalLog.apply(console, args);
113 const output = document.getElementById('output');
114 output.textContent += args.map(String).join(' ') + '\n';
115 };
116 })();
117
118 document.getElementById('executeBtn').addEventListener('click', () => {
119 // Prevent multiple loads
120 if (document.getElementById('externalScript')) return;
121
122 const script = document.createElement('script');
123 script.src = 'javascript-html-shadow-dom.js';
124 script.id = 'externalScript';
125 //script.onload = () => console.log('javascript-html-shadow-dom.js loaded and executed.');
126 //script.onerror = () => console.log('Failed to load javascript-html-shadow-dom.js.');
127 document.body.appendChild(script);
128 });
129 </script>
130</body>
131</html>शैडो DOM को समझना
शैडो DOM वेब कंपोनेंट्स मानक की एक शक्तिशाली विशेषता है, जो कंपोनेंट्स के भीतर स्टाइल और DOM संरचना का एनकैप्सुलेशन सक्षम करता है। यह विशेषता कंपोनेंट्स और मुख्य दस्तावेज़ के बीच स्टाइल और स्क्रिप्ट के हस्तक्षेप को रोकती है।
जावास्क्रिप्ट में शैडो DOM
शैडो DOM एक नियमित DOM एलिमेंट से जुड़ा स्कोप्ड DOM ट्री बनाने का एक तरीका प्रदान करता है। यह शैडो ट्री संपूर्ण दस्तावेज़ से अलग होता है, जहां बाहरी स्टाइल और स्क्रिप्ट इसका प्रभाव नहीं डालते, और आंतरिक स्टाइल और स्क्रिप्ट भी बाहर नहीं जाते।
उदाहरण के लिए, यदि आप शैडो DOM का उपयोग करके एक कस्टम बटन कंपोनेंट बनाते हैं, तो इसकी स्टाइल्स पेज पर अन्य एलिमेंट्स से टकराएंगी नहीं। इसी तरह, समान क्लास नाम वाले एलिमेंट्स में कोई टकराव नहीं होगा।
Shadow DOM के बाहर की सामान्य HTML सामग्री को Light DOM कहा जाता है।
शैडो DOM के लाभ
-
एनकैप्सुलेशन
Shadow DOMशैली और कार्यक्षमता को अलग करता है, जिससे ग्लोबल स्टाइल्स और स्क्रिप्ट्स के साथ टकराव नहीं होता।
-
पुनः उपयोगिता
Shadow DOMके साथ बनाए गए घटकों को विभिन्न परियोजनाओं में शैली संघर्ष की चिंता किए बिना पुनः उपयोग किया जा सकता है।
-
रखरखाव योग्यता
- एनकैप्सुलेशन, कॉम्पोनेन्ट की लॉजिक और शैली को स्व-निहित बनाता है, जिससे डिबगिंग और रखरखाव आसान हो जाता है।
शैडो 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' });व्याख्या
इस कोड में निम्नलिखित तत्त्व शामिल हैं:।
-
होस्ट एलिमेंट
- एक सामान्य DOM एलिमेंट जिसमें शैडो रूट जोड़ा जाता है (इस मामले में,
#shadow-host)।
- एक सामान्य DOM एलिमेंट जिसमें शैडो रूट जोड़ा जाता है (इस मामले में,
-
शैडो रूट
attachShadowका उपयोग करके बनाई गई शैडो ट्री की रूट।
-
मोड
openमोड में, बाहरी JavaScriptelement.shadowRootके माध्यम से शैडो रूट को एक्सेस कर सकती है। दूसरी ओर,closedमोड पहुंच की अनुमति नहीं देता है।
शैडो DOM के भीतर स्टाइलिंग
शैडो डोम की अपनी स्टाइल सीमा होती है। शैडो ट्री में निर्धारित स्टाइल केवल उसी ट्री के अंदर मौजूद एलिमेंट्स पर लागू होती है। यहाँ एक उदाहरण है:।
1// Add content to the shadow root
2shadowRoot.innerHTML = `
3 <style>
4 p {
5 color: green;
6 }
7 </style>
8 <p>Scoped style inside Shadow DOM.</p>
9`;मुख्य दस्तावेज़ में यदि विरोधी शैलियाँ भी हों, तो वे शैडो ट्री के भीतर पैरा पर असर नहीं डालतीं।
1const content = document.getElementById('content');
2content.innerHTML = `
3 <style>
4 p {
5 color: red;
6 }
7 </style>
8 <p>This is in the main DOM.</p>
9`;Shadow DOMके भीतर वाला पैराग्राफ हरा रहता है, जबकि बाहरी पैराग्राफ लाल होता है।
शैडो डोम के भीतर घटनाएँ
शैडो डोम के भीतर की घटनाएँ साधारण DOM घटनाओं के समान होती हैं, लेकिन एन्कैप्सुलेशन के कारण प्रसार के संदर्भ में उनका व्यवहार अलग हो सकता है।
यहाँ एक उदाहरण है:।
1// Add an event listener inside Shadow DOM
2shadowRoot.innerHTML = `
3 <div id="button-container">
4 <button id="shadow-button">Click Me</button>
5 </div>
6`;
7
8shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
9 console.log('Button : Button clicked inside Shadow DOM');
10 console.log(event.target);
11});
12
13shadowRoot.querySelector('#button-container').addEventListener('click', (event) => {
14 console.log('Container : Button clicked inside Shadow DOM');
15 console.log(event.target);
16});
17
18hostElement.addEventListener('click', (event) => {
19 console.log('Event bubbled to the host element');
20 console.log(event.target);
21});
22
23document.addEventListener('click', (event) => {
24 console.log('Document listener');
25 console.log(event.target);
26});- जब बटन पर क्लिक किया जाता है, तो दोनों श्रोताओं को सक्रिय किया जाता है, जो इवेंट बबलिंग के व्यवहार को प्रदर्शित करता है।
Shadow DOMके अंदर उत्पन्न होने वाली घटना जबLight DOMतक पहुंचती है, तो उस घटना काtargetमूल स्रोत के बजाय होस्ट तत्व में बदल दिया जाता है।- इस उदाहरण में,
Shadow DOMके अंदरevent.targetअसलीbuttonतत्व है, लेकिनShadow DOMके बाहर यह होस्टdivतत्व से बदल जाता है।
- इस उदाहरण में,
Shadow DOM और कस्टम एलिमेंट्स
Shadow DOM और कस्टम एलिमेंट्स, Web Components के मुख्य घटक हैं। ये पुन: उपयोग योग्य और संलग्न UI घटकों को बनाने के लिए उपयोग की जाने वाली तकनीकें हैं।
1class MyCard extends HTMLElement {
2 constructor() {
3 super();
4 const shadow = this.attachShadow({ mode: 'open' });
5 shadow.innerHTML = `
6 <style>
7 p {
8 color: blue;
9 }
10 </style>
11 <p>I'm inside shadow DOM</p>
12 `;
13 }
14}
15
16customElements.define('my-card', MyCard);मुख्य दस्तावेज़ में इस प्रकार की HTML होती है:।
1<my-card></my-card>- कस्टम एलिमेंट्स के अंदर
Shadow DOMका उपयोग करके, आप पुन: उपयोग योग्य ऐसे घटक बना सकते हैं जो स्टाइल टकराव का विरोध करते हैं। इस कोड में,my-cardनाम का एक टैग बनाया गया है और उसेMyCardक्लास से जोड़ा गया है।my-cardके अंदर का<p>तत्व बाहरी शैलियों से प्रभावित नहीं होता और हमेशा नीले रंग में प्रदर्शित होता है।
स्लॉट्स: Light DOM सामग्री को वितरित करना
स्लॉट्स आपको Light DOM सामग्री को Shadow DOM में प्रोजेक्ट करने की अनुमति देते हैं। यहाँ एक उदाहरण है:।
1class MyElement extends HTMLElement {
2 constructor() {
3 super();
4 const shadow = this.attachShadow({ mode: 'open' });
5
6 shadow.innerHTML = `
7 <style>
8 .container {
9 border: 2px solid #ccc;
10 padding: 16px;
11 border-radius: 8px;
12 font-family: sans-serif;
13 }
14 .header {
15 font-size: 1.2em;
16 color: darkblue;
17 margin-bottom: 8px;
18 }
19 .content {
20 font-size: 1em;
21 color: #333;
22 }
23 </style>
24 <div class="container">
25 <div class="header">
26 <slot name="header"></slot>
27 </div>
28 <div class="content">
29 <slot name="content"></slot>
30 </div>
31 </div>
32 `;
33 }
34}
35
36customElements.define('my-element', MyElement);मुख्य दस्तावेज़ में इस प्रकार की HTML होती है:।
1<my-element>
2 <h3 slot="header">Header Content</h1>
3 <p slot="content">Main Content</p>
4</my-element>Shadow DOMके भीतर काslotतत्व उसLight DOMसामग्री को दिखाता है जिसमें संबंधितslotगुण मौजूद होता है।
निष्कर्ष
शैडो डोम मज़बूत, पुन: प्रयोज्य, और अनुरक्षित वेब घटकों को बनाने का एक महत्वपूर्ण उपकरण है। स्टाइल और कार्यक्षमता को एन्कैप्सुलेट करके, यह संघर्ष की संभावना को कम करता है और कोडबेस प्रबंधन को सरल बनाता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।