শ্যাডো ডোম কী?
এই প্রবন্ধটি ব্যাখ্যা করে শ্যাডো ডোম কী তা।
YouTube Video
শ্যাডো ডোম বোঝা
শ্যাডো ডোম ওয়েব কম্পোনেন্টস স্ট্যান্ডার্ডের একটি শক্তিশালী বৈশিষ্ট্য যা কম্পোনেন্টগুলির স্টাইল এবং ডোম কাঠামোকে এনক্যাপসুলেট করতে সক্ষম করে। এই বৈশিষ্ট্যটি কম্পোনেন্ট এবং মূল ডকুমেন্টের মধ্যে স্টাইল এবং স্ক্রিপ্টের হস্তক্ষেপ প্রতিরোধ করে।
শ্যাডো ডোম কী?
শ্যাডো ডোম একটি নির্দিষ্ট 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`;ব্যাখ্যা
-
হোস্ট উপাদান: একটি সাধারণ DOM উপাদান, যাতে শ্যাডো রুট সংযুক্ত করা হয় (এক্ষেত্রে
#shadow-host)। -
শ্যাডো রুট:
attachShadowব্যবহার করে তৈরি করা শ্যাডো ট্রির মূল। -
মোড:
openমোডে, বাইরের জাভাস্ক্রিপ্টelement.shadowRootএর মাধ্যমে শ্যাডো রুট অ্যাক্সেস করতে পারে। অন্যদিকে,closedমোড অ্যাক্সেস অনুমোদন করে না।
শ্যাডো ডোম-এর মধ্যে স্টাইলিং
শ্যাডো ডম এর নিজস্ব স্টাইল স্কোপ রয়েছে। শ্যাডো ট্রিতে নির্ধারিত স্টাইল শুধুমাত্র সেই ট্রির মধ্যে থাকা উপাদানগুলির জন্য প্রযোজ্য। এখানে একটি উদাহরণ রয়েছে:।
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>শ্যাডো ডমের ভিতর থাকা প্যারাগ্রাফগুলি সবুজ থাকে, যখন বাইরের প্যারাগ্রাফগুলি লাল হয়।
শ্যাডো ডম এর ভেতর ইভেন্টস
শ্যাডো ডম এর ভেতর ইভেন্টগুলি সাধারণ ডম ইভেন্টগুলির মতোই, তবে এনক্যাপসুলেশনের কারণে প্রচার ক্ষেত্রে ভিন্ন আচরণ করতে পারে। শ্যাডো ট্রিতে ঘটে যাওয়া ইভেন্টগুলি হোস্ট উপাদানে পর্যন্ত বুদবুদ হতে পারে, তবে সম্পূর্ণ ডকুমেন্টে সরাসরি পৌঁছায় না।
এখানে একটি উদাহরণ রয়েছে:
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});যখন বোতামে ক্লিক করা হয়, উভয় লিসেনার সক্রিয় হয়, ইভেন্ট বুদবুদ হওয়ার আচরণ প্রদর্শন করে।
স্লট: লাইট ডম সামগ্রীর বণ্টন
স্লট আপনাকে লাইট ডম থেকে শ্যাডো ডম-এ বিষয়বস্তু প্রক্ষেপণ করতে দেয়। এখানে একটি উদাহরণ রয়েছে:।
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>শ্যাডো ডম এর মধ্যে slot উপাদানগুলো লাইট ডম বিষয়বস্তু প্রদর্শন করে সংশ্লিষ্ট slot অ্যাট্রিবিউট সহ।
উপসংহার
শ্যাডো ডম হল শক্তিশালী, পুনর্ব্যবহারযোগ্য এবং পরিচালনাযোগ্য ওয়েব উপাদান তৈরির জন্য একটি গুরুত্বপূর্ণ টুল। স্টাইল এবং কার্যকারিতা এনক্যাপসুলেট করে, এটি বিরোধের সম্ভাবনা হ্রাস করে এবং কোডবেস পরিচালনা সহজ করে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।