تجسم مفاهیم سایه DOM

Shadow DOM موضوعی دشوار است که می توانید سر خود را به آن بپیچید. این فقط پیچیده است. مفاهیم ناآشنا را معرفی می کند که ما به آنها در وب عادت نداریم. مرزهای سایه، محدوده طراحی، هدف‌گذاری مجدد رویداد، نقاط درج، نقاط درج سایه، گره‌های میزبان، گره‌های توزیع‌شده،...زبان و زبان ادامه می‌یابد.

یکی از مواردی که از نظر مفهومی در مورد Shadow DOM مالیات می‌دهد، نحوه نمایش محصول نهایی شما (DOM) توسط مرورگر است. گره ها از گره میزبان به طور جادویی در نقاط درج ShadowRoot چرخانده می شوند، اما به طور منطقی، هنوز در گره میزبان باقی می مانند. عجیب و غریب! بنابراین در زمان رندر، آنها به عنوان بخشی از درخت سایه ظاهر می شوند و نه میزبان اصلی. نحوه انجام این رندر یکی از گیج کننده ترین قطعات Shadow DOM است.

چند روز پیش، ابزاری را منتشر کردم که روی آن کار می‌کردم به نام Shadow DOM Visualizer برای کمک به کاهش منحنی یادگیری.

این به شما امکان می دهد به صورت بصری ببینید که Shadow DOM چگونه در مرورگر رندر می شود، چیزی که امروزه DevTools فاقد آن است. هر دو بلوک کد سیاه در سمت چپ قابل ویرایش هستند. سعی کنید نقاط درج <content> را تغییر دهید، موارد جدید را حذف یا اضافه کنید تا ببینید درخت ترکیبی (رندر شده) در سمت راست چگونه تحت تأثیر قرار می گیرد.

ماوس را روی گره ها در نمودار قرار دهید تا نشانه گذاری مربوطه در سمت چپ برجسته شود. بله برای d3.js ! گره های آبی از گره میزبان می آیند. گره های زرد از Shadow DOM می آیند. نقاط درج <content> پل بین دو جهان هستند. از آنجایی که منطقاً در Shadow DOM قرار دارند، رنگ آنها زرد است. حاشیه آبی آنها نشان می دهد که آنها گره های میزبان آبی را به مهمانی رندر دعوت می کنند.

Shadow DOM در Chrome 25 در دسترس است و عنصر <template> در Chrome 26 موجود است (اگرچه شما فقط به اولین مورد نیاز دارید تا نسخه نمایشی را امتحان کنید).