HTML Academy · درس

attachShadow وShadow Root

إنشاء شجرة ظل معزولة على عنصر مضيف

attachShadow وShadow Root درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

ما هو Shadow DOM؟

يمنح Shadow DOM العنصر شجرة DOM معزولة خاصة به، تُسمى «shadow tree»، ولا تظهر في DOM الرئيسي للصفحة. لا تتسرّب CSS الخارجية إلى الداخل، ولا تخرج CSS الداخلية إلى الخارج — وهذا يوفر عزلًا مثاليًا للمكونات.

إرفاق Shadow Root

استدعِ this.attachShadow({ mode: "open" }) من constructor الخاص بالعنصر المخصّص أو من connectedCallback. تعيد هذه الدالة ShadowRoot، الذي يمكنك ملؤه مثل شجرة DOM عادية باستخدام innerHTML وappendChild وغيرهما.

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = "<style>p{color:red}</style><p>Hello</p>";
  }
}

الوضع المفتوح مقابل المغلق

يكشف mode: "open" شجرة الظل عبر element.shadowRoot. أما mode: "closed" فيخفيها — إذ يعيد element.shadowRoot القيمة null، ولذلك لا تستطيع النصوص البرمجية الخارجية دخول الشجرة. ونادرًا ما يكون الوضع المغلق مفيدًا عمليًا، لأن الرمز نفسه الذي عرّف العنصر يمكنه الاحتفاظ بمرجعه الخاص على أي حال.

عزل الأنماط

تنطبق الأنماط المعرّفة داخل شجرة الظل، عبر <style> أو أوراق الأنماط المعتمدة، داخل شجرة الظل تلك فقط. لا تطابق محددات CSS في المستند الرئيسي العناصر الفرعية للظل مطلقًا، كما لا تتجاوز أنماط الظل إلى المستند.

المحدد :host

من داخل شجرة الظل، يُحدَّد العنصر المضيف، أي العنصر المخصّص نفسه، باستخدام الفئة الزائفة الخاصة :host. تطابق :host(.large) عندما يمتلك المضيف الفئة .large، وتطابق :host([disabled]) عندما يمتلك المضيف السمة disabled.

:host {
  display: block;
  padding: 16px;
  border: 1px solid #ccc;
}
:host([disabled]) {
  opacity: 0.5;
  pointer-events: none;
}

display: block في العناصر المخصّصة

تكون العناصر المخصّصة افتراضيًا على display: inline. داخل جذر الظل، طبّق :host { display: block } لكي يتصرف العنصر كمكوّن على مستوى الكتلة. ويؤدي نسيان ذلك غالبًا إلى ظهور مشكلة «لماذا يجري تجاهل width: 100% لدي؟».

تركيب الأحداث

تُعاد إحالة الأحداث التي تنتشر خارج شجرة الظل إلى المضيف. فعند النقر على زر داخلي، يصل الحدث إلى المستمعات الخارجية بحيث يكون event.target === host. استخدم event.composedPath() لرؤية الهدف الداخلي الحقيقي إذا احتجت إلى ذلك.

composed: true للأحداث المخصّصة

لا تعبر الأحداث المخصّصة التي يتم إطلاقها داخل جذر الظل الحدّ الفاصل ما لم تنشئها مع كلٍّ من bubbles: true وcomposed: true. من دون composed، لا ترى المستمعات الخارجية المرتبطة بالمضيف الحدث مطلقًا.

لا يمكن للبرامج النصية التسرّب إلى الداخل

يمكن للبرامج النصية الخارجية الاستعلام عن عنصر المضيف، لكن لا يمكنها الوصول إلى العناصر التابعة له داخل الظل. يعيد document.querySelector("my-card span") نتيجة فارغة إذا كان العنصر <span> داخل شجرة الظل. تحمي العزلية العناصر الداخلية من الترابط غير المقصود.

Shadow DOM التصريحي

عند وضع <template shadowrootmode="open"> داخل HTML الخاص بعنصر، ينشئ المتصفح شجرة الظل أثناء التحليل من دون JavaScript. يجعل ذلك المكوّنات المولّدة على الخادم ملائمة لعملية hydration، لأن شجرة الظل تكون موجودة قبل تشغيل JavaScript.

اعتبارات الأداء

لكل جذر ظل تكلفة إضافية — نطاق أنماط إضافي وطبقة عرض إضافية. لا تمثل مئات جذور الظل مشكلة، لكن عشرات الآلاف منها قد تكون مؤثرة. في واجهات المستخدم عالية الكثافة جدًا، مثل الجداول الكبيرة والقوائم الافتراضية، أجرِ تحليلًا للأداء للتأكد من أن تكلفة Shadow DOM مقبولة.

اختبار الفهم

ما الذي يتيحه الوضع المفتوح ولا يتيحه الوضع المغلق؟

الخلاصة

ينشئ attachShadow({ mode: "open" }) شجرة DOM فرعية معزولة لا تتسرّب إليها CSS والمعرّفات ولا تتسرّب منها. نسّق المضيف باستخدام :host، وتذكّر display: block، واستخدم composed: true للأحداث التي يجب أن تتجاوز الحدّ الفاصل. تتصرّف شجرة الظل مثل DOM عادي في بقية النواحي — إذ تعمل داخلها innerHTML وappendChild وquerySelector بصورة طبيعية.

الأسئلة الشائعة

هل درس «attachShadow وShadow Root» مجاني؟

نعم — نص درس «attachShadow وShadow Root» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «attachShadow وShadow Root»؟

إنشاء شجرة ظل معزولة على عنصر مضيف تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «attachShadow وShadow Root»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy