عرض مفاهيم shadow DOM

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

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

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

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

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

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