HTML Academy · درس

عناصر Slot لتوزيع المحتوى

إسقاط محتوى المضيف في Shadow DOM باستخدام slots مسماة وافتراضية

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

DOM الخفيف مقابل DOM الظل

تشكّل العناصر الأبناء المكتوبة داخل عنصر مخصّص في HTML ما يُسمّى بـ "DOM الخفيف" للعنصر؛ فهي لا توجد في شجرة الظل. لا يعرضها المتصفح افتراضيًا؛ بل يجب أن تطلب شجرة الظل عرضها صراحةً باستخدام <slot>.

الـslot الافتراضي

يحدّد عنصر <slot> داخل شجرة الظل الموضع الذي ينبغي أن تظهر فيه العناصر الأبناء من DOM الخفيف. وعندما لا يحمل اسمًا، يكون هو الـslot الافتراضي ويقبل أي عنصر ابن مباشر للمضيف.

// Shadow:
<div class="frame">
  <slot></slot>
</div>
// Usage:
<my-card>
  <p>This paragraph appears inside the frame</p>
</my-card>

الـslots المسماة

يمكن الوصول إلى عدة slots باستخدام أسمائها. تعلن شجرة الظل عن <slot name="header">؛ ويطلب المستخدم استخدامه عبر <h1 slot="header">. تملأ العناصر الأبناء التي تحمل قيمة مطابقة في سمة slot ذلك الـslot، بينما تنتقل العناصر غير المطابقة إلى الـslot الافتراضي.

// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
  <h1 slot="header">Title</h1>
  <p>Body</p>
</my-card>

المحتوى الاحتياطي للـslot

يُعرض المحتوى الموجود بين علامتَي slot فقط عندما لا يكون هناك أي محتوى مسند إلى ذلك الـslot: <slot>No content provided</slot>. استخدمه لعرض نص إرشادي أو نص نائب للـslots الفارغة.

وراثة الأنماط عبر الـslots

تبقى العناصر الأبناء المسندة إلى slots في DOM الخفيف، وترث الأنماط من المستند الرئيسي لا من شجرة الظل. استخدم pseudo-element ::slotted() من داخل شجرة الظل لتنسيقها: ::slotted(p) { color: red; }.

قيود ::slotted

لا يستطيع ::slotted() استهداف سوى العناصر الأبناء المباشرة للمضيف، أي العناصر التي وُزّعت فعليًا في الـslot. ولا يمكنه استهداف العناصر التابعة لها. ولتنسيق مستويات أعمق، اكشف عن خصائص CSS المخصّصة أو استخدم ::part على العناصر الداخلية لشجرة الظل.

اكتشاف تغيّرات الـslot

يطلق كل slot حدث slotchange عند تغيّر العقد المسندة إليه. استمع إلى هذا الحدث للاستجابة لتحديثات المحتوى الديناميكية: slot.addEventListener("slotchange", handler). يفيد ذلك في المكوّنات التي يعتمد تخطيطها على العناصر الأبناء الموجودة فيها.

const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
  const nodes = slot.assignedNodes();
  console.log("Slot now holds", nodes.length, "nodes");
});

assignedNodes وassignedElements

يعيد slot.assignedNodes() جميع العقد المسندة إلى slot، بما في ذلك عقد النص. أما slot.assignedElements() فيعيد عناصر Element الأبناء فقط — وهي عادةً ما تحتاج إليه عند التكرار برمجيًا على المحتوى المسند إلى slot.

توزيع العناصر الأبناء

يتولى المتصفح عملية التوزيع بأكملها تلقائيًا استنادًا إلى سمة slot في كل عنصر ابن. لا توجد خطوة JavaScript — اكتب <span slot="footer">...</span> ضمن العناصر الأبناء في DOM الخفيف للمضيف، وسيحتويه slot المطابق في شجرة الظل.

الـslots وتنسيق المضيف

تتدرج أنماط المضيف نفسه، المحدّدة على <my-card> في المستند، إلى العناصر الأبناء من DOM الخفيف، بما فيها العناصر التي ينتهي بها المطاف في slots. تتمتع CSS الخاصة بالظل عبر ::slotted بدرجة تخصيص أعلى من أنماط المضيف الموروثة عندما تستهدف القاعدة نفسها الخاصية نفسها.

حالات الاستخدام الشائعة

بطاقات تحتوي على slots للرأس والمتن والتذييل، ومربعات حوار تحتوي على slots للعنوان والمحتوى والإجراءات، وعناصر قوائم تحتوي على slots للمحتوى السابق واللاحق، وقوائم تنقّل تحتوي على slots للعناصر. تجعل slots العناصر المخصّصة قابلة للتركيب بالطريقة نفسها التي تجعل بها <details>/<summary> أو <table>/<tr> كذلك.

اختبار الفهم

ما الفرق بين الـslot الافتراضي والـslot المسمّى؟

الخلاصة

تُسقط slots عناصر DOM الخفيف الأبناء في مواضع محدّدة داخل شجرة الظل. يقبل الـslot الافتراضي أي عنصر ابن غير مسمّى، بينما تقبل الـslots المسماة العناصر الأبناء التي تحمل سمات slot مطابقة. يملأ المحتوى الاحتياطي الـslots الفارغة، وتنسّق ::slotted العناصر الأبناء المباشرة المسندة إلى slots، بينما تستجيب أحداث slotchange لتحديثات المحتوى الديناميكية.

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

هل درس «عناصر Slot لتوزيع المحتوى» مجاني؟

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

ماذا ستتعلم في «عناصر Slot لتوزيع المحتوى»؟

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

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

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

كم من الوقت يستغرق درس «عناصر Slot لتوزيع المحتوى»؟

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

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

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

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

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