গুগল ক্রোমের বিকাশকারী সরঞ্জামগুলিতে আমি ট্যাগের #shadow-rootনীচে একটি ডান দেখতে পাচ্ছি <html lang="en">। এটি কী করে এবং এটি কীসের জন্য ব্যবহৃত হয়? আমি এটি ফায়ারফক্সে বা আইই তে দেখতে পাচ্ছি না; শুধুমাত্র ক্রোমে, এটি কি একটি বিশেষ বৈশিষ্ট্য?
যদি আমি এটি খুলি, এটি <head>এবং <body>নামের পাশে একটি লিঙ্ক দেখায় reveal, ক্লিক করে এটি <head>এবং <body>অন্য কিছুকে নির্দেশ করে।
উত্তর:
এটি একটি বিশেষ সূচক যা একটি ছায়া ডিওএম বিদ্যমান। এগুলি বছরের পর বছর ধরে রয়েছে, তবে সম্প্রতি পর্যন্ত এই বিকাশকারীদের কখনও এপিআই দেওয়া হয়নি। ক্রোমের কিছুক্ষণের জন্য এই কার্যকারিতাটি ছিল, অন্য ব্রাউজারগুলি এখনও সন্ধান করছে। এটি "উপাদানসমূহ" বিভাগের অধীনে ডেভটুলস সেটিংসে টগল করা যেতে পারে। "ব্যবহারকারী এজেন্ট শ্যাডো ডিওএম প্রদর্শন করুন" টি সরিয়ে ফেলুন। এটি অন্তত অভ্যন্তরীণভাবে তৈরি যে কোনও শ্যাডো ডমগুলি লুকিয়ে রাখবে (যেমন নির্বাচিত উপাদানগুলি)) এটি এখনই অনিশ্চিত যদি এটি ব্যবহারকারীর দ্বারা নির্মিত যেমন যেমন কাস্টম উপাদানগুলিকে প্রভাবিত করে।
এগুলি আইফ্রেমেসের মতো জিনিসগুলিতেও আসে, যেখানে আপনার আলাদা ডিওএম গাছ থাকে অন্যের ভিতরে।
ছায়া ডোম কেবলই বলছে যে পৃষ্ঠার কিছু অংশ এর অভ্যন্তরে নিজস্ব ডম রয়েছে। স্টাইল এবং স্ক্রিপ্টিং সেই উপাদানটির মধ্যেই সীমাবদ্ধ থাকতে পারে সুতরাং এতে যা চালিত হয় কেবল সেই সীমানায় কার্যকর হয়।
ওয়েব উপাদানগুলির কাজ করার জন্য এটি প্রয়োজনীয় প্রাথমিক টুকরোগুলির মধ্যে একটি । এটি একটি নতুন প্রযুক্তি যা বিকাশকারীদের নিজস্ব এনক্যাপসুলেটেড উপাদানগুলি তৈরি করতে দেয় যা বিকাশকারীরা অন্য কোনও HTML উপাদানগুলির মতোই ব্যবহার করতে পারে।
শ্যাডো ডিওমের উদাহরণ হিসাবে, যখন আপনি <video>কোনও ওয়েব পৃষ্ঠায় একটি ট্যাগ রাখেন , তখন এটি মূল ডোমটিতে কেবল একটি ট্যাগ হিসাবে দেখানো হয়, তবে আপনি যদি ছায়া ডোম সক্ষম করেন, আপনি ভিডিও প্লেয়ারের এইচটিএমএল (প্লেয়ার ডিওএম) দেখতে সক্ষম হবেন।
এই হল এই প্রবন্ধে যথাযোগ্যভাবে ব্যাখ্যা, http://webcomponents.org/articles/introduction-to-shadow-dom/
ওয়েব উপাদানগুলির ক্ষেত্রে, এখানে একটি মৌলিক সমস্যা রয়েছে যা এইচটিএমএল এবং জাভাস্ক্রিপ্ট দ্বারা নির্মিত উইজেটগুলি ব্যবহার করা শক্ত করে।
সমস্যা : উইজেটের ভিতরে থাকা ডিওএম গাছটি বাকী পৃষ্ঠা থেকে এনক্যাপুলেটেড নয়। এনক্যাপসুলেশনের এই অভাবটির অর্থ আপনার নথির স্টাইলশিটটি ঘটনাক্রমে উইজেটের অভ্যন্তরের অংশগুলিতে প্রয়োগ হতে পারে; আপনার জাভাস্ক্রিপ্ট ভুলক্রমে উইজেটের অভ্যন্তর অংশগুলি সংশোধন করতে পারে; আপনার আইডিগুলি উইজেটের অভ্যন্তরে আইডিগুলির সাথে ওভারল্যাপ হতে পারে।
ছায়া ডিওএম ডিওএম ট্রি এনক্যাপসুলেশন সমস্যার সমাধান করে ।
উদাহরণস্বরূপ, আপনার যদি এইরকম মার্কআপ থাকে:
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
তারপর পরিবর্তে
Hello, world!
আপনার পৃষ্ঠার মত দেখাচ্ছে
こんにちは、影の世界!
শুধু তাই নয়, পৃষ্ঠাটিতে জাভাস্ক্রিপ্ট যদি জিজ্ঞাসা করে যে বোতামটির পাঠ্য বিষয়বস্তুটি কী, এটি পেতে যাচ্ছে না “こんにちは、影の世界!”, তবে “Hello, world!” ছায়া গোষ্ঠীর নীচে থাকা ডিওএম সাবট্রিটি এনপ্যাপুলেটেড ।
দ্রষ্টব্য : আমি https://www.html5rocks.com/en/tutorials/webcompferences/shadowdom/ থেকে উপরের সামগ্রীটি তুলেছি কারণ এটি ইতিমধ্যে এখানে উত্তরগুলির চেয়ে ছায়া ডিওএমকে বুঝতে আরও সহায়তা করেছে। আমি এখানে প্রাসঙ্গিক সামগ্রী যুক্ত করেছি যাতে এটি অন্যকে সহায়তা করে তবে সে সম্পর্কে বিস্তারিত আলোচনার জন্য লিঙ্কটি একবার দেখুন।