ছায়া DOM আপনার মাথার চারপাশে মোড়ানো একটি কঠিন বিষয়। এটা শুধু জটিল. এটি অপরিচিত ধারণার পরিচয় দেয় যা আমরা ওয়েবে অভ্যস্ত নই। শ্যাডো বাউন্ডারি, স্টাইলিং স্কোপিং, ইভেন্ট রিটার্গেটিং, ইনসার্শন পয়েন্ট, শ্যাডো ইনসার্শন পয়েন্ট, হোস্ট নোড, ডিস্ট্রিবিউটেড নোড,...লিঙ্গো চলতেই থাকে।
শ্যাডো ডম সম্পর্কে ধারণাগতভাবে ট্যাক্সিং করা একটি জিনিস হল ব্রাউজার দ্বারা আপনার চূড়ান্ত পণ্য (DOM) রেন্ডার করা। হোস্ট নোড থেকে নোডগুলি জাদুকরীভাবে একটি ShadowRoot এর সন্নিবেশ পয়েন্টে swizzled হয়, তবুও যৌক্তিকভাবে, এখনও হোস্ট নোডে থাকে। অদ্ভুত! তাই রেন্ডারের সময়, তারা ছায়া গাছের অংশ হিসাবে উপস্থিত হয় এবং মূল হোস্ট নয়। কিভাবে এই রেন্ডারিং সঞ্চালিত হয় ছায়া DOM এর সবচেয়ে বিভ্রান্তিকর টুকরাগুলির মধ্যে একটি।
কয়েকদিন আগে, আমি শেখার বক্ররেখা কমাতে সাহায্য করার জন্য Shadow DOM Visualizer নামে একটি টুল প্রকাশ করেছি।
এটি আপনাকে ব্রাউজারে শ্যাডো ডম কীভাবে রেন্ডার করে তা দৃশ্যত দেখতে দেয়, যা আজ DevTools-এর অভাব রয়েছে৷ বাম দিকে উভয় কালো কোড ব্লক সম্পাদনাযোগ্য. সংমিশ্রিত (রেন্ডার করা) গাছ ডানদিকে কীভাবে প্রভাবিত হয় তা দেখতে <content> সন্নিবেশ পয়েন্টগুলি পরিবর্তন করার, অপসারণ বা নতুন যোগ করার চেষ্টা করুন।
বাম দিকে প্রাসঙ্গিক মার্কআপ হাইলাইট করতে গ্রাফের নোডের উপর মাউস করুন। d3.js এর জন্য হ্যাঁ! হোস্ট নোড থেকে নীল নোড আসছে। হলুদ নোডগুলি ছায়া DOM থেকে আসে। <content> সন্নিবেশ পয়েন্ট হল দুটি বিশ্বের মধ্যে সেতু। কারণ তারা যৌক্তিকভাবে ছায়া DOM এ রয়েছে, তারা হলুদ রঙের। তাদের নীল সীমানা নির্দেশ করে যে তারা রেন্ডারিং পার্টিতে নীল হোস্ট নোডকে আমন্ত্রণ জানায়।
শ্যাডো ডম Chrome 25-এ উপলব্ধ এবং <template> উপাদানটি Chrome 26-এ উপলব্ধ (যদিও ডেমো চেষ্টা করার জন্য আপনার শুধুমাত্র প্রথমটি প্রয়োজন)।