عرض مفاهيم shadow DOM

Shadow DOM هو موضوع يصعب فهمه. الأمر معقد. فهو يقدم مفاهيم غير مألوفة لم اعتدنا عليها على الويب. حدود التظليل، وتحديد نطاق الأنماط، وإعادة استهداف الأحداث، ونقاط الإدراج، ونقاط إدراج الظل، وعُقد المضيف، والعُقد الموزَّعة، وغيرها من المعارف.

هناك شيء واحد من الناحية النظرية يتم فيه فرض ضرائب على Shadow DOM هو الطريقة التي يعرض بها المتصفِّح منتجك النهائي (DOM). يتم تبديل العُقد من عُقدة المضيف بشكل سحري إلى نقاط إدراج ShadowRoot، ولكن منطقيًا، تظل في عقدة المضيف. يا له من أمر عجيب! ولذلك، تظهر في وقت العرض كجزء من شجرة الظل وليس المضيف الأصلي. تعتبر طريقة حدوث هذا العرض أحد أكثر أجزاء Shadow DOM.

قبل بضعة أيام، أصدرت أداة كنت أعمل عليها اسم Shadow DOM Visualizer للمساعدة في تقليل تقدّم التعلُّم.

ويتيح لك أيضًا الاطّلاع بشكل مرئي على كيفية عرض Shadow DOM في المتصفّح، وهو ما تفتقر إليه أدوات مطوّري البرامج في الوقت الحالي. يمكن تعديل كلتا كتلتَي الرموز السوداء على اليسار. جرِّب تغيير نقاط إدراج <content> أو إزالة نقاط إدراج أو إضافة نقاط جديدة لمعرفة كيفية تأثُّر الشجرة المركّبة (المعروضة) على يسار الصفحة.

مرِّر مؤشر الماوس فوق العُقد في الرسم البياني لإبراز الترميز ذي الصلة على اليمين. مرحبًا d3.js! تأتي العُقد الزرقاء من عقدة المضيف. تأتي العُقد الصفراء من Shadow DOM. تمثِّل <content> نقاط إدراج الجسر بين العالمَين ولأنها بشكل منطقي في Shadow DOM، تكون ملونة باللون الأصفر. ويشير الحد الأزرق إلى أنها تدعو العُقد المضيفة الزرقاء إلى مجموعة العرض.

يتوفّر Shadow DOM في Chrome 25، ويتوفّر العنصر <template> في Chrome 26 (إلا أنّك لن تحتاج سوى إلى تجربة الإصدار التجريبي أولاً).