JavaScript Academy · درس

Shadow DOM والتغليف

اعزلوا الأنماط والترميز داخل جذور الظل.

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

ما هو Shadow DOM؟

يمنح Shadow DOM العنصر شجرة DOM خاصة ومعزولة. ويظل الترميز والأنماط الموجودان داخله معزولين عن بقية الصفحة.

لا تتسرّب CSS الخارجية إلى الداخل.
لا تتسرّب CSS الداخلية إلى الخارج.
تكون البنية الداخلية مخفية عن استعلامات DOM العادية.

attachShadow

تنشئون شجرة ظل باستدعاء this.attachShadow({ mode: 'open' }). ويُعيد ذلك جذر ظل يمكنكم ملؤه مثل أي عقدة عادية.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

الوضع open مقابل closed

يتحكم الخيار mode في الوصول من الخارج:

'open' — يمكن الوصول إلى الجذر عبر element.shadowRoot.
'closed' — تُعيد element.shadowRoot القيمة null؛ ولا يحتفظ بالمرجع إلا الكود الخاص بكم.

تستخدم معظم المكونات 'open' لتسهيل تصحيح الأخطاء.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

ملء جذر الظل

اضبطوا shadowRoot.innerHTML لإنشاء المحتوى المعزول. ويكون هذا الترميز غير مرئي لـ document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

الأنماط ذات النطاق المحدد

تؤثر علامة style الموجودة داخل جذر الظل في ذلك الجذر فقط. ولا يتأثر المحدد نفسه خارج المكون، كما لا تتسرّب أنماط الصفحة إلى الداخل.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

محدد :host

يستهدف :host داخل أنماط الظل العنصر المخصص نفسه (مضيف شجرة الظل). استخدموه لتنسيق الإطار الخارجي للمكون.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

عزل الأنماط عمليًا

يعني التغليف أن مؤلفي المكونات ومؤلفي الصفحات لن يضطروا بعد الآن إلى التنافس على أسماء الأصناف. ولا تؤثر قاعدة .title داخل أحد المكونات مطلقًا في .title في مكان آخر.

لا تعارضات في CSS العامة.
أصبح استخدام المحددات البسيطة والعامة آمنًا من جديد.

الاستعلام داخل جذر الظل

للوصول إلى العقد الداخلية، أجروا الاستعلام على جذر الظل لا على المستند. ويدعم جذر الظل أساليب الاستعلام نفسها.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

تعبر الأحداث الحد الفاصل

تتدفق أحداث كثيرة (مثل click) إلى خارج Shadow DOM، لكنها تُعاد إعادة توجيه هدفها بحيث ترى مستمعات الأحداث الخارجية العنصر المضيف بدلًا من العقدة الداخلية. ويحافظ ذلك على العزل.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

الأنماط القابلة للتوارث

ترث بعض خصائص CSS (مثل color وfont-family) قيمها عبر حد الظل، لأن التوارث يتدفق عبر الشجرة المركبة. ويمكنكم اعتماد مظهر الصفحة باستخدام التوارث أو باستخدام خصائص CSS المخصصة.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

متى تستخدمون Shadow DOM؟

استخدموا Shadow DOM عندما تحتاجون إلى عزل قوي للأنماط والترميز في أداة قابلة لإعادة الاستخدام. وتجنبوه عندما تريدون أن يرث المكون أنماط الصفحة العامة ويشارك فيها بحرية.

اختبار سريع

اختبروا مدى فهمكم لـ Shadow DOM.

مراجعة

تعلمتم عن Shadow DOM:

ينشئ attachShadow({ mode }) شجرة معزولة.
يكشف 'open' عن shadowRoot، بينما يخفيه 'closed'.
تكون علامات style الداخلية ذات نطاق محدد، ويُنسّق :host العنصر نفسه.
تُجرى الاستعلامات على جذر الظل لا على المستند.
تُعاد توجيه أهداف الأحداث للحفاظ على العزل.

سنُعيد استخدام الترميز بعد ذلك باستخدام القوالب والمنافذ.

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

هل درس «Shadow DOM والتغليف» مجاني؟

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

ماذا ستتعلم في «Shadow DOM والتغليف»؟

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

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

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

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

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

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

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

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

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