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