جاري التحميل...

عناصر HTML مخصصة

تُعد عناصر HTML المخصصة (Custom Elements) جزءًا من مواصفات "مكونات الويب" (Web Components)، وهي تتيح لك إنشاء عناصر جديدة تمامًا بميزات وسلوكيات قابلة لإعادة الاستخدام. مثل تنظيم مكتبة بوضع كل نوع من الكتب في رفوف مخصصة، تتيح لك هذه العناصر تنظيم مكونات الواجهة بحيث تصبح أكثر وضوحًا وقابلة للصيانة.
أهمية هذه العناصر تكمن في أنها تسمح للمطورين ببناء واجهات متناسقة ومعاد استخدامها في مواقع إخبارية (news site)، متاجر إلكترونية (e-commerce)، صفحات شخصية (personal page)، وحتى بوابات حكومية (government portal). على سبيل المثال، يمكنك إنشاء عنصر مخصص لعرض بطاقة خبر، أو منتج، أو معلومات مستخدم — ثم استخدامه عشرات المرات دون تكرار الكود.
سوف تتعلم في هذا الدرس كيفية إنشاء عناصر HTML مخصصة، استخدام "نداءات دورة الحياة" (Lifecycle Callbacks)، التعامل مع الخصائص (Attributes)، وأفضل الممارسات لتفادي الأخطاء الشائعة. هذا الدرس مخصص للمستوى المتقدم، لكنه مشروح بأسلوب واضح وبأمثلة واقعية، مما يجعله مناسبًا حتى لمن بدأ مؤخرًا في التعامل مع HTML وJavaScript.

مثال أساسي

html
HTML Code
<!-- تعريف عنصر HTML مخصص وعرضه في الصفحة -->

<script>
class WelcomeBanner extends HTMLElement {
connectedCallback() {
this.innerHTML = "<h2>مرحبًا بك في موقعي!</h2>";
}
}
customElements.define('welcome-banner', WelcomeBanner);
</script>

<welcome-banner></welcome-banner>

في هذا المثال، قمنا بإنشاء عنصر HTML مخصص يُدعى <welcome-banner>. أولًا، عرفنا صنفًا (class) باسم WelcomeBanner يرث من HTMLElement، وهو الصنف الأساسي لعناصر HTML المخصصة. هذا يعني أن العنصر الخاص بنا سيكون لديه جميع خصائص وسلوكيات عناصر HTML القياسية، مع إمكانية التوسع.
ثم استخدمنا connectedCallback()، وهي دالة تُستدعى تلقائيًا عندما يُضاف العنصر إلى شجرة DOM. يشبه هذا دخولك إلى غرفة وتزيينها فورًا — هذه اللحظة المناسبة لإضافة المحتوى أو تحميل البيانات أو تهيئة السلوك. داخلها، استخدمنا this.innerHTML لإضافة عنصر <h2> يعرض رسالة ترحيب.
وأخيرًا، استخدمنا customElements.define() لتعريف العنصر باسم welcome-banner وربطه بالكلاس الذي أنشأناه. من المهم جدًا أن يحتوي اسم العنصر المخصص على شرطة (-) كي لا يتعارض مع عناصر HTML الأصلية.
إذا كنت مبتدئًا، قد تتساءل: هل هذا يتطلب مكتبة خارجية؟ الجواب: لا. هذا كله مبني باستخدام JavaScript وHTML فقط ويعمل مباشرة في جميع المتصفحات الحديثة. هذه الطريقة فعالة لبناء واجهات قابلة للتوسيع والصيانة دون الحاجة إلى أطر عمل ثقيلة.

مثال عملي

html
HTML Code
<!-- عنصر مخصص لعرض منتج في متجر إلكتروني -->

<script>
class ProductCard extends HTMLElement {
connectedCallback() {
const title = this.getAttribute('title') || "منتج بدون اسم";
const price = this.getAttribute('price') || "غير محدد";
this.innerHTML = `
<div class="product">
<h3>${title}</h3>
<p>السعر: ${price} ريال</p>
</div>`;
}
}
customElements.define('product-card', ProductCard);
</script>

<product-card title="ساعة ذكية" price="299"></product-card>

عند التعامل مع عناصر HTML مخصصة في المشاريع الحقيقية، يجب الالتزام بمجموعة من الممارسات الجيدة وتجنب الأخطاء الشائعة للحفاظ على جودة الكود وقابلية الصيانة:
أفضل الممارسات (Best Practices):

  1. الهيكلة الدلالية (Semantic HTML): داخل العنصر المخصص، استخدم عناصر مثل <article>, <header>, <section> بدلًا من استخدام <div> فقط، لتحسين فهم المتصفحات ومحركات البحث.
  2. الوصولية (Accessibility): أضف سمات ARIA أو تسميات لتسهيل استخدام العناصر للمستخدمين ذوي الاحتياجات الخاصة.
  3. القابلية لإعادة الاستخدام: اجعل العناصر عامة قدر الإمكان عن طريق تمرير البيانات عبر السمات بدلًا من تثبيتها داخل الكود.
  4. تنظيم الكود: ضع كل عنصر في ملف منفصل عند استخدامه في مشروع كبير لتسهيل الصيانة وإعادة الاستخدام.
    أخطاء شائعة (Common Mistakes):

  5. إهمال التسجيل: نسيان استخدام customElements.define() يؤدي إلى تجاهل العنصر وعدم عرضه.

  6. إهمال القيم الافتراضية: عدم التحقق من السمات قد يؤدي إلى ظهور محتوى ناقص أو أخطاء.
  7. استخدام غير دلالي: الاعتماد على <div>ات بدون معنى يقلل من الفائدة البنيوية للكود.
  8. التعشيش الخاطئ: وضع عناصر مخصصة داخل عناصر غير صالحة (مثلاً داخل <ul>) قد يُسبب مشكلات في التنسيق.
    نصائح تصحيح الأخطاء (Debugging):
    إذا لم يتم عرض العنصر، تحقق من الترتيب: يجب أن يتم تعريف العنصر قبل استخدامه في HTML. راقب أيضًا أخطاء في Console مثل "Uncaught TypeError" أو "not defined".
    توصية عملية:
    اختر أسماء وصفية ومعبرة لعناصرك مثل <news-article> أو <user-profile>، واحتفظ بهيكل نظيف ومنظم داخل العنصر.

📊 مرجع سريع

Property/Method Description Example
customElements.define() تسجيل العنصر المخصص في المتصفح customElements.define('my-tag', MyClass)
connectedCallback() تنفذ عند إدخال العنصر إلى DOM استخدمها لإضافة محتوى أو تحميل بيانات
disconnectedCallback() تنفذ عند إزالة العنصر من DOM تنظيف الأحداث أو المؤقتات
observedAttributes تحديد السمات التي تتم مراقبتها static get observedAttributes() { return \['name'] }
attributeChangedCallback() تنفذ عند تغيير السمة المحددة تحديث المحتوى تلقائيًا
HTMLElement الصنف الأساسي لعناصر HTML المخصصة class MyTag extends HTMLElement

في هذا الدرس، تعرفنا على عناصر HTML مخصصة (Custom Elements) وكيفية استخدامها لإنشاء مكونات قابلة لإعادة الاستخدام تعتمد على بنية HTML الأصلية دون الحاجة لمكتبات خارجية. تعلّمت كيفية استخدام connectedCallback()، التعامل مع السمات (Attributes)، وأفضل الممارسات لتفادي الأخطاء.
هذه التقنية تفتح الباب لتصميم واجهات متقدمة ومتسقة في مشاريع متنوعة، من المتاجر الإلكترونية إلى بوابات الأخبار والمواقع الحكومية. يمكن ربط هذه العناصر بسهولة مع CSS لتنسيق المظهر، وJavaScript لإضافة التفاعلات.
مواضيع مقترحة للخطوة التالية:

  • التعرف على ظل DOM (Shadow DOM) لعزل الأنماط
  • استخدام قوالب HTML (Templates) مع العناصر المخصصة
  • التفاعل مع المستخدم باستخدام الأحداث (Events)
  • دمج العناصر المخصصة داخل أطر عمل مثل Vue أو React
    استمر بالتجربة، وابدأ ببناء مكتبتك الخاصة من العناصر المخصصة، فكل عنصر تبنيه هو مثل لبنة في بناء منزلك الرقمي.

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

اختبر فهمك لهذا الموضوع بأسئلة عملية.

4
الأسئلة
🎯
70%
للنجاح
♾️
الوقت
🔄
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى