टाइपस्क्रिप्ट में शैडो DOM

Articles

यह लेख टाइपस्क्रिप्ट में शैडो DOM के बारे में बताता है।

हम Shadow DOM की बुनियादी बातों से लेकर उसके व्यावहारिक उपयोग तक सबकुछ विस्तार से समझाएंगे, और आपको प्रैक्टिकल सैंपल कोड भी प्रदान करेंगे।

YouTube Video

typescript-html-shadow-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>TypeScript &amp; 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>
 90
 91    <div class="container">
 92        <h1>JavaScript Console</h1>
 93        <button id="executeBtn">Execute</button>
 94        <div id="output"></div>
 95    </div>
 96
 97    <script>
 98        // Override console.log to display messages in the #output element
 99        (function () {
100            const originalLog = console.log;
101            console.log = function (...args) {
102                originalLog.apply(console, args);
103                const output = document.getElementById('output');
104                output.textContent += args.map(String).join(' ') + '\n';
105            };
106        })();
107
108        document.getElementById('executeBtn').addEventListener('click', () => {
109            // Prevent multiple loads
110            if (document.getElementById('externalScript')) return;
111
112            const script = document.createElement('script');
113            script.src = '/out/main.js';
114            script.id = 'externalScript';
115            //script.onload = () => console.log('typescript-html-shadow-dom.js loaded and executed.');
116            //script.onerror = () => console.log('Failed to load typescript-html-shadow-dom.js.');
117            document.body.appendChild(script);
118        });
119    </script>
120</body>
121</html>

`शैडो DOM` का विस्तृत विवरण और व्यावहारिक चरण-दर-चरण मार्गदर्शन

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

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

शैडो DOM निम्नलिखित विशेषताओं के साथ एक वेब मानक तकनीक है।

कैप्सुलेशन

शैडो DOM किसी कॉम्पोनेंट की आंतरिक DOM संरचना को बाहरी प्रभावितों से अलग करता है। अन्य शैलियां और स्क्रिप्ट बाधा नहीं डालते, जिससे पुन: प्रयोग क्षमता बढ़ती है।
स्वतंत्र शैली का दायरा

शैडो DOM के अंदर की शैलियां बाहरी CSS को प्रभावित नहीं करती हैं। इसी तरह, बाहरी शैलियां शैडो DOM के अंदर लागू नहीं होती हैं।
अलग थलग DOM ट्री

शैडो DOM नियमित DOM से अलग एक स्वतंत्र ट्री के रूप में होता है, जिसमें पेरेंट DOM से सीमित पहुंच होती है।

`शैडो DOM` का बुनियादी उपयोग

निम्नलिखित कोड शैडो DOM का उपयोग करने वाला पहला उदाहरण है।

 1class MyElement extends HTMLElement {
 2  constructor() {
 3    super();
 4
 5    // Attach Shadow DOM
 6    const shadowRoot = this.attachShadow({ mode: 'open' });
 7
 8    // Add HTML and CSS inside Shadow DOM
 9    shadowRoot.innerHTML = `
10      <style>
11        p {
12          color: blue;
13          font-size: 18px;
14        }
15      </style>
16      <p>This is inside Shadow DOM!</p>
17    `;
18  }
19}
20
21// Register the custom element
22customElements.define('my-element', MyElement);
23
24document.getElementById('content').innerHTML = `
25  <my-element></my-element>
26`;

ब्राउज़र नीले टेक्स्ट को प्रदर्शित करेगा: 'यह शैडो DOM के अंदर है!'। इस टेक्स्ट की शैली बाहरी CSS से प्रभावित नहीं होती है।

`Shadow DOM` के मूल कदम

Shadow DOM का उपयोग करने के लिए, जैसा कि इस कोड में दिखाया गया है, आप JavaScript में attachShadow मेथड का प्रयोग करते हैं। नीचे बुनियादी चरण दिए गए हैं:।

कस्टम एलिमेंट्स बनाना कस्टम एलिमेंट एक यूज़र-डिफाइंड टैग है, जिसे आप सामान्य HTML टैग्स के अलावा खुद बना सकते हैं। इस चरण में, आप ऐसी क्लास बनाते हैं जो HTMLElement से एक्सटेंड होती है, जैसे कि MyElement क्लास, जिससे ब्राउज़र इसे एक नया टैग समझ सके। बनी हुई क्लास को customElements.define() से रजिस्टर करने पर, आप इसे HTML में एक कस्टम टैग की तरह उपयोग कर सकते हैं।
शैडो DOM जोड़ना किसी कस्टम एलिमेंट के अंदर this.attachShadow() को चलाकर आप एक Shadow DOM बना सकते हैं।
शैडो DOM के अंदर HTML और CSS जोड़ना Shadow DOM के भीतर, आप अपनी खुद की HTML संरचना और स्टाइल्स डिफाइन कर सकते हैं। उदाहरण के लिए, innerHTML में HTML और CSS सेट करके आप इसे बाहरी CSS या HTML से प्रभावित हुए बिना एक स्वतंत्र रूप और व्यवहार दे सकते हैं। इससे आप एनकैप्सुलेटेड कंपोनेंट्स बना सकते हैं।

`शैडो DOM` के तरीके: `open` और `closed`

शैडो DOM के दो तरीके होते हैं: open और closed।

ओपन मोड: शैडो DOM से जुड़ा shadowRoot बाहरी रूप से एक्सेस किया जा सकता है।
क्लोज़्ड मोड: शैडो DOM से जुड़ा shadowRoot बाहरी रूप से एक्सेस नहीं किया जा सकता।

नीचे एक कोड उदाहरण दिया गया है जो दोनों मोड के बीच का अंतर दिखाता है।

 1class OpenElement extends HTMLElement {
 2  constructor() {
 3    super();
 4    this.attachShadow({ mode: 'open' }).innerHTML = `
 5      <p>Open Shadow DOM</p>
 6    `;
 7  }
 8}
 9
10class ClosedElement extends HTMLElement {
11  constructor() {
12    super();
13    this.attachShadow({ mode: 'closed' }).innerHTML = `
14      <p>Closed Shadow DOM</p>
15    `;
16  }
17}
18
19customElements.define('open-element', OpenElement);
20customElements.define('closed-element', ClosedElement);
21
22document.getElementById('content').innerHTML = `
23  <open-element></open-element>
24  <closed-element></closed-element>
25`;
26
27const openElement = document.querySelector('open-element') as OpenElement;
28console.log(openElement.shadowRoot); // ShadowRootが出力される
29
30const closedElement = document.querySelector('closed-element') as ClosedElement;
31console.log(closedElement.shadowRoot); // nullが出力される

closed मोड को चुनने से shadowRoot प्रॉपर्टी को एक्सेस करना असम्भव हो जाता है।

`शैडो DOM` का उपयोग करके शैली को कैप्सुलेट करना

शैडो DOM का उपयोग करके, आप अपनी component के अंदर पूरी तरह से शैली को कैप्सुलेट कर सकते हैं।

निम्नलिखित उदाहरण शैडो DOM के भीतर की शैलियों और वैश्विक शैलियों के पृथक्करण को प्रदर्शित करता है।

 1class StyledElement extends HTMLElement {
 2  constructor() {
 3    super();
 4    const shadowRoot = this.attachShadow({ mode: 'open' });
 5
 6    shadowRoot.innerHTML = `
 7      <style>
 8        p {
 9          background-color: lightblue;
10          padding: 10px;
11          border: 1px solid blue;
12        }
13      </style>
14      <p>Shadow DOM Styled Content</p>
15    `;
16  }
17}
18
19customElements.define('styled-element', StyledElement);
20
21document.getElementById('content').innerHTML = `
22  <style>
23    p {
24      color: red;
25      font-weight: bold;
26    }
27  </style>
28
29  <styled-element></styled-element>
30`;

Shadow DOM के अंदर मौजूद p तत्व वैश्विक स्टाइल्स से प्रभावित नहीं होते हैं और उन पर अपनी विशिष्ट स्टाइल्स लागू होती हैं।

`शैडो DOM` का व्यावहारिक उदाहरण: कस्टम टूलटिप

इसके बाद, हम शैडो DOM का उपयोग करके एक कस्टम टूलटिप बनाने का उदाहरण प्रस्तुत करते हैं।

 1class Tooltip extends HTMLElement {
 2  constructor() {
 3    super();
 4
 5    const shadowRoot = this.attachShadow({ mode: 'open' });
 6
 7    shadowRoot.innerHTML = `
 8      <style>
 9        :host {
10          position: relative;
11          display: inline-block;
12          cursor: pointer;
13        }
14
15        .tooltip {
16          visibility: hidden;
17          background-color: black;
18          color: white;
19          text-align: center;
20          padding: 5px;
21          border-radius: 5px;
22          position: absolute;
23          bottom: 125%;
24          left: 50%;
25          transform: translateX(-50%);
26          white-space: nowrap;
27        }
28
29        :host(:hover) .tooltip {
30          visibility: visible;
31        }
32      </style>
33      <slot></slot>
34      <div class="tooltip">Tooltip text</div>
35    `;
36  }
37}
38
39customElements.define('custom-tooltip', Tooltip);
40
41document.getElementById('content').innerHTML = `
42  <custom-tooltip>
43    Hover over me
44    <span slot="tooltip">This is a custom tooltip!</span>
45  </custom-tooltip>
46`;

यह कोड एक कस्टम टूलटिप बनाता है और hover पर एक स्टाइलिश टूलटिप दिखाता है।

सारांश

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

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

YouTube Video

टाइपस्क्रिप्ट में DOM हेरफेर/इवेंट हैंडलिंग के लिए उपयोग की जाने वाली कक्षाएं

टाइपस्क्रिप्ट में शैडो DOM

YouTube Video

शैडो DOM का विस्तृत विवरण और व्यावहारिक चरण-दर-चरण मार्गदर्शन

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

शैडो DOM का बुनियादी उपयोग

Shadow DOM के मूल कदम

शैडो DOM के तरीके: open और closed

शैडो DOM का उपयोग करके शैली को कैप्सुलेट करना

शैडो DOM का व्यावहारिक उदाहरण: कस्टम टूलटिप

सारांश

YouTube Video

`शैडो DOM` का विस्तृत विवरण और व्यावहारिक चरण-दर-चरण मार्गदर्शन

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

`शैडो DOM` का बुनियादी उपयोग

`Shadow DOM` के मूल कदम

`शैडो DOM` के तरीके: `open` और `closed`

`शैडो DOM` का उपयोग करके शैली को कैप्सुलेट करना

`शैडो DOM` का व्यावहारिक उदाहरण: कस्टम टूलटिप