defineCustomElement() تعريف عنصر مخصص
آخر تحديث: 2026-10-22
defineCustomElement() تعريف عنصر مخصص
تغلّف defineCustomElement() مكوّن Vue ليصبح Web Component قياسياً: يمكن استهلاكه بوسم
| المجموعة | دوال العرض و SSR |
|---|---|
| النوع | API |
| النطاق | عام |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
const MyEl = defineCustomElement({ props: { msg: String }, template: "<p>{{ msg }}</p>" })
customElements.define("my-element", MyEl)⚙️ الوسائط
| options | تعريف المكوّن (يمكن أن يتضمن مصفوفة styles لحقن الأنماط) |
|---|
القيمة المُرجعة：صنف عنصر مخصص (يُسلَّم إلى customElements.define للتسجيل)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Renders 'from a custom element'.💡 نقاط مهمة
ℹ️ ملاحظة مفيدة عند إعادة استخدام المكوّنات عبر حزم التقنيات: نظام التصميم يمكنه خدمة Vue/React/الصفحات الأصلية معاً.
💡 نصيحة خيار styles يحقن الأنماط في shadow DOM، فيعطي تغليفاً أقوى.
⚠️ تحذير العناصر المخصصة تستخدم بروتوكول الأحداث والخصائص الأصلي في المتصفح: يجب التصريح عن props صراحة لتتمكن من ضبطها على العنصر.
🏷️ دوال العرض و SSR ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س متى تحتاجها؟
ج عند الحاجة لإعادة استخدام المكوّنات خارج Vue، أو توفير Web Components وفق مواصفات المنصة.
س هل تلوّث الأنماط الصفحة؟
ج استخدام shadow DOM (خيار styles) يعزلها؛ وإلا تسري الأنماط عالمياً.
س هل تُستخدم داخل Vue؟
ج نعم، لكن في الحالات الاعتيادية استخدم المكوّن مباشرة دون المرور بالعناصر المخصصة.
