টাইপস্ক্রিপ্টে শ্যাডো ডম

Articles

এই নিবন্ধটি টাইপস্ক্রিপ্টে শ্যাডো ডম সম্পর্কে ব্যাখ্যা করে।

আমরা 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>

`শ্যাডো ডম` এর বিশদ ব্যাখ্যা এবং ব্যবহারিক ধাপে ধাপে নির্দেশিকা

শ্যাডো ডম ওয়েব কম্পোনেন্টের মূল উপাদানগুলির একটি। এটি একটি পৃথক ডম ট্রি তৈরি করে যা কম্পোনেন্টের স্টাইল এবং কাঠামোকে বাইরের প্রভাব থেকে আলাদা রাখে। এখানে, আমরা শ্যাডো ডম এর মৌলিক বিষয়গুলি থেকে এর বাস্তব ব্যবহার পর্যন্ত বিশদ ব্যাখ্যা প্রদান করব, হাতেকলমে নমুনা কোড সহ।

`শ্যাডো ডম` কী?

শ্যাডো ডম একটি ওয়েব স্ট্যান্ডার্ড প্রযুক্তি যার নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে।

এনক্যাপসুলেশন

শ্যাডো ডম একটি কম্পোনেন্টের অভ্যন্তরীণ ডম কাঠামোকে বাইরের প্রভাব থেকে আলাদা করে। অন্যান্য স্টাইল এবং স্ক্রিপ্ট হস্তক্ষেপ করে না, যার ফলে পুনরায় ব্যবহারযোগ্যতা বৃদ্ধি পায়।
স্বতন্ত্র স্টাইল স্কোপ

শ্যাডো ডম এর মধ্যে থাকা স্টাইল বাইরের CSS-এ প্রভাব ফেলে না। একইভাবে, বাইরের স্টাইল শ্যাডো ডম এর মধ্যে প্রযোজ্য হয় না।
পৃথক ডম ট্রি

শ্যাডো ডম সাধারণ ডম থেকে একটি পৃথক ট্রি হিসাবে বিদ্যমান, এবং প্যারেন্ট ডম থেকে সীমিত অ্যাক্সেস রয়েছে।

`শ্যাডো ডম` এর মৌলিক ব্যবহার

শ্যাডো ডম ব্যবহার করে নিম্নলিখিত কোডটি প্রথম উদাহরণ।

 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-এ একটি কাস্টম ট্যাগ হিসেবে ব্যবহার করতে পারবেন।
শ্যাডো ডম সংযুক্ত করা কাস্টম এলিমেন্টের ভিতরে this.attachShadow() চালিয়ে আপনি একটি Shadow DOM তৈরি করতে পারেন।
শ্যাডো ডম এর ভিতরে HTML এবং CSS যোগ করা Shadow DOM-এর ভিতরে, আপনি আপনার নিজস্ব HTML স্ট্রাকচার এবং স্টাইল নির্ধারণ করতে পারেন। উদাহরণস্বরূপ, innerHTML-এ HTML এবং CSS সেট করে আপনি এটিকে স্বাধীন রূপ ও আচরণ দিতে পারেন, বাহ্যিক CSS বা HTML দ্বারা প্রভাবিত না হয়ে। এটি আপনাকে ইনক্যাপসুলেটেড কম্পোনেন্ট তৈরি করতে দেয়।

`শ্যাডো DOM` এর মোড: `ওপেন` এবং `ক্লোজড`

শ্যাডো DOM এর দুটি মোড রয়েছে: ওপেন এবং ক্লোজড।

ওপেন মোড: শ্যাডো 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が出力される

ক্লোজড মোড বেছে নেওয়া হলে shadowRoot প্রপার্টি অ্যাক্সেসযোগ্য হবে না।

`শ্যাডো DOM` ব্যবহার করে শৈলী এনক্যাপসুলেশন

শ্যাডো 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`;

এই কোডটি একটি কাস্টম টুলটিপ তৈরি করে এবং হোভার করার সময় স্টাইলকৃত টুলটিপ দেখায়।

সারসংক্ষেপ

শ্যাডো DOM ওয়েব উপাদানগুলির জন্য একটি গুরুত্বপূর্ণ প্রযুক্তি, যা একটি এনক্যাপসুলেটেড DOM এবং স্টাইল স্কোপ প্রদান করে। এখানে, আমরা শ্যাডো DOM এর মৌলিক বিষয়গুলি, এর ব্যবহার, মোডের পার্থক্য, শৈলী এনক্যাপসুলেশন এবং ব্যবহারিক উদাহরণগুলি আলোচনা করেছি। এগুলো ব্যবহার করে আপনি পুনরায় ব্যবহারযোগ্য এবং শক্তিশালী কম্পোনেন্ট তৈরি করতে পারেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন/ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত ক্লাসগুলি

টাইপস্ক্রিপ্টে শ্যাডো ডম

YouTube Video

শ্যাডো ডম এর বিশদ ব্যাখ্যা এবং ব্যবহারিক ধাপে ধাপে নির্দেশিকা

শ্যাডো ডম কী?

শ্যাডো ডম এর মৌলিক ব্যবহার

Shadow DOM-এর মৌলিক ধাপসমূহ

শ্যাডো DOM এর মোড: ওপেন এবং ক্লোজড

শ্যাডো DOM ব্যবহার করে শৈলী এনক্যাপসুলেশন

শ্যাডো DOM এর ব্যবহারিক উদাহরণ: কাস্টম টুলটিপ

সারসংক্ষেপ

YouTube Video

`শ্যাডো ডম` এর বিশদ ব্যাখ্যা এবং ব্যবহারিক ধাপে ধাপে নির্দেশিকা

`শ্যাডো ডম` কী?

`শ্যাডো ডম` এর মৌলিক ব্যবহার

`Shadow DOM`-এর মৌলিক ধাপসমূহ

`শ্যাডো DOM` এর মোড: `ওপেন` এবং `ক্লোজড`

`শ্যাডো DOM` ব্যবহার করে শৈলী এনক্যাপসুলেশন

`শ্যাডো DOM` এর ব্যবহারিক উদাহরণ: কাস্টম টুলটিপ