الأنماط محددة النطاق داخل Shadow DOM

تنطبق كل قاعدة <style> داخل جذر الظل على ذلك الجذر وحده. تلوّن p { color: red } داخل شجرة ظل فقرات تلك الشجرة فقط — فلا تتأثر الفقرات في المستند الرئيسي، كما لا تصل أنماط المستند الرئيسي إلى داخل الظل.

تتخلص العزلية من مشكلة CSS العامة التي أرهقت التطبيقات الكبيرة لعقود. فلا يمكن لأنماط الموقع أن تتجاوز أنماط المكوّن عرضيًا، ولا يمكن للمكوّن أن يعطّل الموقع عرضيًا. الحدّ الفاصل تحدده المواصفة، وليس مجرد اتفاقية.

من داخل شجرة الظل، نسّق عنصر المضيف باستخدام :host. استخدم :host(selector) لتقييد النطاق وفق محدّد: تطابق :host([open]) { display: block; } المضيف فقط عند وجود سمة open.

ما زالت خصائص CSS الموروثة، مثل color وfont-family وline-height، تعبر حدّ الظل عن طريق الوراثة. يؤدي ضبط المستند للقاعدة body { color: blue } إلى جعل نص الظل أزرق أيضًا، ما لم تتجاوزها شجرة الظل صراحةً. وهذه ميزة تضمن بقاء الإعدادات الافتراضية للطباعة متسقة.

ترث الجذور الظلية الخصائص المخصّصة، أو متغيرات CSS، مما يجعلها الطريقة المعتمدة لكشف واجهة API الخاصة بتخصيص مظهر المكوّن: أعلن عن --card-bg: var(--surface, white) داخل شجرة الظل، ودَع المستهلكين يتجاوزون --surface على المضيف.

ضع علامة part="name" على عنصر داخلي في شجرة الظل، ليتمكن المستهلكون من تنسيقه باستخدام my-card::part(name) { ... }. استخدم الأجزاء كنقاط ربط لتنسيق عناصر محددة، مع إبقاء معظم شجرة الظل معزولة.

تشارك shadowRoot.adoptedStyleSheets = [sheet] ورقة CSSStyleSheet واحدة بين العديد من جذور الظل، مما يتجنب تحليل عناصر <style> المتكررة. أنشئ الأوراق باستخدام new CSSStyleSheet() وsheet.replaceSync(cssText). يحقق ذلك مكسبًا كبيرًا في الأداء ضمن أنظمة التصميم.

ضع علامات <style> في أعلى موضع ممكن من innerHTML الخاص بالظل، حتى تُحلّل الأنماط قبل إنشاء بقية DOM. يؤدي ذلك إلى تجنّب الظهور الخاطف للمحتوى غير المنسّق الذي يحدث عندما تصل الأنماط متأخرة في ترتيب التحليل.

تنسّق :host-context(.dark-mode) :host المضيف استنادًا إلى محدّد لعنصر سلف خارج شجرة الظل. يفيد ذلك في تطبيق مظهر على المكوّنات بناءً على فئة موجودة في غلاف عالي المستوى. دعم المتصفحات جيد، لكن تحقّق منه ضمن مجموعة المتصفحات المستهدفة لديك.

لا تؤثر عمليات ضبط CSS على مستوى المستند، مثل الهوامش على body وbox-sizing، في أشجار الظل. أعد تطبيق عمليات الضبط المطلوبة داخل كل جذر ظل، أو شاركها عبر ورقة أنماط منشأة واعتمدها في كل مكوّن.

يعرض Chrome DevTools جذور الظل في لوحة Elements تحت "#shadow-root (open)". يمكنك فحص أنماط الظل وتعديلها وتفعيلها أو تعطيلها مثل أي CSS أخرى، بما في ذلك الفئة الزائفة :host وقواعد ::part.

يعزل Shadow DOM الأنماط في الاتجاهين. نسّق المضيف باستخدام :host، واكشف نقاط ربط المظهر عبر خصائص CSS المخصّصة الموروثة، واكشف عناصر محددة للتنسيق باستخدام ::part، وشارك أوراق الأنماط باستخدام adoptedStyleSheets، وأعد تطبيق عمليات الضبط داخل كل جذر ظل لأن CSS على مستوى المستند لا يعبر الحدّ الفاصل.