تتوفر مكونات الويب على جميع المتصفّحات، ويشهد المنتدى نموًا متزايدًا، وهناك كتالوج جديد تمامًا لمكونات الويب للعثور على المكوّن الذي تحتاجه بالضبط.
هل أردت إنشاء مكوّن JavaScript مستقل يمكنك استخدامه بسهولة في مشاريع متعددة أو مشاركته مع مطوّرين آخرين بغض النظر عن إطار عمل JavaScript الذي يستخدمونه؟ قد تكون مكونات الويب مناسبة لك.
مكونات الويب هي مجموعة من ميزات أنظمة الويب الأساسية الجديدة التي تتيح لك إنشاء
عناصر HTML الخاصة بك. يمكن أن يتضمّن كل عنصر مخصّص جديد علامة مخصّصة مثل
<my-button>، ويمكن أن يتضمّن كل مزايا العناصر المضمّنة، إذ يمكن أن يتضمّن العناصر المخصّصة
خصائص وطُرقًا، وتنشيط الأحداث والاستجابة لها، وحتى استخدام
نمط مُدمَج وأشجار DOM لإضافة مظهر وأسلوب خاصَّين به.
من خلال توفير نموذج مكونات منخفض المستوى يستند إلى النظام الأساسي، تتيح لك Web Components إنشاء عناصر قابلة لإعادة الاستخدام ومشاركتها لأي شيء، بدءًا من الأزرار المخصّصة وحتى الاطِّلاع على التنسيقات المعقدة مثل أدوات اختيار التاريخ. بما أنّ مكوّنات الويب تم إنشاؤها باستخدام واجهات برمجة التطبيقات للمنصّات التي تتضمّن عناصر أساسية فعّالة للتغليف، يمكنك أيضًا استخدام هذه المكوّنات ضمن مكتبات JavaScript أو أُطر عمل أخرى كما لو كانت عناصر DOM عادية.
ربما سمعت من قبل عن Web Components، وهو إصدار مبكر من مواصفات Web Components، وهو الإصدار 0، الذي تم طرحه في Chrome 33.
اليوم، بفضل التعاون الواسع النطاق بين مورّدي المتصفّحات، يحظى الجيل التالي من مواصفات Web Components، أي الإصدار 1، بدعم واسع النطاق. يتيح Chrome المواصفات الرئيسية التي تشكّل مكونات الويب، وهما Shadow DOM وCustom Elements ، وذلك اعتبارًا من الإصدار 53 من Chrome والإصدار 54 من Chrome على التوالي. طرح Safari الإصدار 1 من Shadow DOM في Safari 10، وأكمل تنفيذ الإصدار 1 من العناصر المخصّصة في WebKit. يعمل Firefox حاليًا على تطوير الإصدار 1 من Shadow DOM وCustom Elements، ويُعدّ كل من Shadow DOM وCustom Elements جزءًا من خارطة الطريق لمتصفّح Edge.
لتحديد عنصر مخصّص جديد باستخدام عملية التنفيذ في الإصدار 1، ما عليك سوى إنشاء
فئة جديدة تمتد إلى HTMLElement باستخدام بنية ES6 وتسجيلها في
المتصفّح:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
إنّ مواصفات الإصدار 1 الجديدة فعّالة للغاية، وقد جمعنا دروسًا تعليمية حول استخدام الإصدار 1 من Custom Elements والإصدار 1 من Shadow DOM لمساعدتك في البدء.
webcomponents.org
يشهد منتدى Web Component أيضًا نموًا متزايدًا. يسرّنا إعلامك بإطلاق موقع webcomponents.org الإلكتروني المعدَّل، وهو النقطة المحورية لمجتمع مكونات الويب، والذي يتضمّن كتالوجًا متكاملاً يتيح للمطوّرين مشاركة عناصرهم.
يحتوي الموقع الإلكتروني webcomponents.org على معلومات حول specs Web Components والتعديلات والمحتوى من منتدى web components، ويعرض مستندات عن عناصر الويب المفتوح المصدر ومجموعات العناصر التي أنشأها مطوّرون آخرون.
يمكنك البدء في إنشاء العنصر الأول باستخدام مكتبة مثل Polymer من Google، أو يمكنك استخدام واجهة برمجة التطبيقات المنخفضة المستوى لـ Web Component مباشرةً. بعد ذلك، يمكنك نشر العنصر على webcomponents.org.
مع أطيب التحيّات،