useHost() الحصول على مضيف العنصر المخصص
آخر تحديث: 2026-10-22
useHost() الحصول على مضيف العنصر المخصص
تحصل useHost() داخل العنصر المخصص على عنصر المضيف (مضيف الـ shadow DOM)، للتعامل مع خصائص المضيف أو أنماطه.
| المجموعة | دوال العرض و SSR |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
const host = useHost()
host.style.border = "1px solid"القيمة المُرجعة：عنصر المضيف (وسم العنصر المخصص نفسه)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Shows the notice — the host is only available inside custom elements.💡 نقاط مهمة
ℹ️ ملاحظة لا معنى لها إلا مع defineCustomElement: في المكوّنات العادية قيمتها null دائماً.
💡 نصيحة استخدمها عند حاجتك لقراءة أو كتابة خصائص على المضيف (مثل size و theme)، لتجنب تلويث البنية الداخلية.
⚠️ تحذير لا تستبدل تدفق البيانات التفاعلي بعمليات على المضيف: تبقى الحالة الداخلية مُدارة عبر props/ref.
🏷️ دوال العرض و SSR ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل تُحدث خطأ في المكوّنات العادية؟
ج لا، تُعيد null، ويلزم فحص القيمة الفارغة.
س ما الفرق عن this.$el؟
ج $el هو عنصر جذر المكوّن؛ بينما useHost يعطي وسم مضيف العنصر المخصص (الحاوية الخارجية).
س هل يمكن تعديل أنماط المضيف؟
ج نعم: host.style / host.classList، لكن يُفضَّل قيادة الأنماط الداخلية عبر props.
