<slot>: عنصر SLOT
آخر تحديث: 2026-10-13
<slot>عنصر SLOT
يعرّف «فتحة» في shadow DOM لمكونات الويب — مكان يُعرض فيه محتوى المضيف؛ name تتيح التوزيع المسمى.
| الفئة | البرامج النصية والتضمين |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </slot> وسم |
| الحالة | قياسي |
📝 البنية
<slot name="title"></slot>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
name | Slot name; host content with slot="name" fills it; omitted is the default slot. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <slot> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： slot يعمل فقط داخل shadow DOM / مكونات الويب؛ في الصفحة العادية لا تأثير توزيعي له.
❓ الأسئلة الشائعة
Qما وظيفة slot؟
A
<slot> «فتحة عنصر نائب» في Web Components: تُحفر في Shadow DOM للمكون المخصص، فيُدخل المستخدم المحتوى الحقيقي عند الاستخدام. مثل <slot name='title'> يقابل محتوى slot='title' لدى المستخدم، محققًا فصل المحتوى عن بنية المكون.Qماذا يظهر في slot غير الممتلئ؟
Aيظهر المحتوى الاحتياطي (fallback) داخل الفتحة: المحتوى المكتوب بين وسمي
<slot>نص افتراضي</slot> لا يُعرض إلا حين لا يقدم المستخدم محتوى مقابلاً. فيكون للمكون حالة افتراضية معقولة.Qهل يجب استخدام slot مع template معًا؟
Aعادةً يتلازمان —
<template> يعرّف بنية Shadow DOM وslot يحفر فيها؛ لكن slot يعمل أيضًا في shadow root منشأ عبر JS. وبالعكس template وحده (قالب من جانب العميل) لا يحتاج slot. فكلاهما شريكان بتقسيم عمل مختلف في منظومة Web Components.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
