জাভাস্ক্রিপ্টে শ্যাডো DOM
এই নিবন্ধে জাভাস্ক্রিপ্টের শ্যাডো 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-এর বাইরে সাধারণ HTML কনটেন্টকে লাইট 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মোডে, বাহ্যিক জাভাস্ক্রিপ্টelement.shadowRootদিয়ে শ্যাডো রুট অ্যাক্সেস করতে পারে। অন্যদিকে,closedমোড অ্যাক্সেস অনুমোদন করে না।
শ্যাডো ডোম-এর মধ্যে স্টাইলিং
শ্যাডো ডম এর নিজস্ব স্টাইল স্কোপ রয়েছে। শ্যাডো ট্রিতে নির্ধারিত স্টাইল শুধুমাত্র সেই ট্রির মধ্যে থাকা উপাদানগুলির জন্য প্রযোজ্য। এখানে একটি উদাহরণ রয়েছে:।
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`;শ্যাডো 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>এলিমেন্টটি বাহ্যিক স্টাইল দ্বারা প্রভাবিত হয় না এবং এটি সর্বদা নীল রঙে প্রদর্শিত হয়।
স্লট: লাইট DOM কনটেন্ট বিতরণ
স্লট ব্যবহার করে আপনি লাইট DOM কনটেন্টকে শ্যাডো 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>শ্যাডো DOM-এর ভিতরেরslotএলিমেন্ট সেই সমস্তলাইট DOMকনটেন্ট দেখায়, যেগুলোর সঠিকslotঅ্যাট্রিবিউট রয়েছে।
উপসংহার
শ্যাডো ডম হল শক্তিশালী, পুনর্ব্যবহারযোগ্য এবং পরিচালনাযোগ্য ওয়েব উপাদান তৈরির জন্য একটি গুরুত্বপূর্ণ টুল। স্টাইল এবং কার্যকারিতা এনক্যাপসুলেট করে, এটি বিরোধের সম্ভাবনা হ্রাস করে এবং কোডবেস পরিচালনা সহজ করে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।