Shadow DOM التصريحي

يُنشأ Shadow DOM التقليدي عبر JavaScript (attachShadow). بالنسبة إلى الصفحات المُصيّرة على الخادم، يعني ذلك أن شجرة Shadow DOM تظل فارغة إلى أن تعمل JavaScript، مما يهزم الغرض من SSR المتمثل في تقديم HTML كامل من أول بايت. يحل Declarative Shadow DOM هذه المشكلة.

يعلن عنصر <template> الذي يتضمن shadowrootmode="open" عن جذر Shadow DOM في HTML وقت التحليل. يربط المتصفح جذر Shadow DOM بالعنصر الأب تلقائيًا، ويصبح محتوى القالب شجرة Shadow DOM. لا حاجة إلى JavaScript.

يتيح Declarative Shadow DOM إنشاء مكونات Web Components مُصيّرة فعلًا على الخادم: يُصدر الخادم شجرة Shadow DOM الكاملة ضمن HTML، ويحللها المتصفح ويربطها قبل تنفيذ أي JavaScript، ثم يمكن لـ JavaScript الخاصة بعملية hydration أن تتولى التحكم انطلاقًا من أساس مُصيّر بالكامل. وهكذا تحصل على إمكانات مماثلة لـ SSR الخاص بالأطر.

الأوضاع هي نفسها الموجودة في attachShadow الإجرائي: تكشف shadowrootmode="open" عن Shadow DOM من خلال element.shadowRoot، بينما تخفيه shadowrootmode="closed". والسلوك مطابق للنظير الذي يُربط عبر JavaScript.

يربط المتصفح جذر Shadow DOM في المرة الأولى التي يرى فيها <template shadowrootmode>. بعد ربطه، يُستهلك القالب، ويؤدي الاستعلام عنه لاحقًا إلى عدم العثور على شيء. يطابق هذا دورة حياة attachShadow: إذ يبقى Shadow DOM موجودًا طوال عمر العنصر.

تُعرض العناصر الأبناء في Light DOM، وهي <p> الموجودة خارج <template> في المثال، داخل عناصر <slot> الموجودة في شجرة Shadow DOM، تمامًا كما يحدث مع Shadow DOM الإجرائي. وتظل آلية التركيب مطابقة؛ فالاختلاف الوحيد هو آلية الربط.

إذا كان <my-card> عنصرًا مخصصًا مسجلًا، فستستخدم عملية الترقية جذر Shadow DOM المرتبط مسبقًا بدلًا من استدعاء attachShadow مرة أخرى. ويمكن لصنف العنصر المخصص قراءة this.shadowRoot في connectedCallback دون الحاجة إلى إنشائه.

يُصدر Lit-html's render ومكونات Astro والعديد من الأطر الأخرى Declarative Shadow DOM ضمن مخرجات SSR الخاصة بها. ويمكن تنفيذ ذلك يدويًا؛ فأي نظام يعتمد على قوالب السلاسل النصية يستطيع كتابة قالب shadowrootmode.

يتوفر Declarative Shadow DOM في Chrome وEdge وSafari وFirefox. وتتجاهل المتصفحات الأقدم عنصر <template> بصمت؛ فالمحتوى الموجود داخل القالب غير مرئي، مما يوفر تدهورًا سلسًا في البيئات التي لا تدعمه.

للحصول على دعم أوسع، يمكن لبرنامج نصي صغير اجتياز DOM وتحويل template[shadowrootmode] إلى جذور Shadow DOM فعلية. شغّله قبل تسجيل أي عنصر مخصص، لضمان رؤية شجرة Shadow DOM المتوقعة عند إجراء ترقيات المكونات لاحقًا.

يكرر Declarative Shadow DOM البنية: فمحتوى <template> موجود في HTML، مع أنه مضمّن أيضًا في صنف المكوّن. وبالنسبة إلى الصفحات التي تحتوي على عدد كبير من المكوّنات نفسها، يؤدي ذلك إلى زيادة حجم الحمولة. وتزيل الأطر هذا التكرار؛ وقد يرغب SSR المكتوب يدويًا في فعل الشيء نفسه.

إذا كنتم تقدمون Web Components وتهتمون بالتصيير من أول بايت أو بتحسين محركات البحث، فاعتمدوا هذه التقنية الآن. فالنتيجة مستقرة ومدعومة، وتحسّن بصورة كبيرة تجربة SSR للتطبيقات القائمة على Web Components. أما التطبيقات التي لا تستخدم Shadow DOM فلا ينطبق عليها ذلك.

يستخدم Declarative Shadow DOM عنصر <template shadowrootmode="open"> داخل عنصر مخصص لربط جذر Shadow DOM وقت التحليل، من دون الحاجة إلى JavaScript. ويتيح SSR فعليًا لمكونات Web Components، إذ تعمل شجرة Shadow DOM والأنماط المحصورة وSlots قبل hydration. وهو مدعوم في جميع المتصفحات الحديثة، ويتوفر له Polyfill للمتصفحات الأقدم. وتصدره الأطر، مثل Lit وAstro، تلقائيًا.