ما هو Web Components
معيار لمكونات واجهة المستخدم القابلة لإعادة الاستخدام
Web Components هي مجموعة من معايير الويب لإنشاء عناصر HTML مخصصة قابلة لإعادة الاستخدام مع وظائف مغلفة.
التقنيات الأساسية
- Custom Elements — إنشاء علامات HTML مخصصة
- Shadow DOM — تغليف الأنماط والترميز
- HTML Templates — قوالب قابلة لإعادة الاستخدام
- ES Modules — تحميل المكونات النمطية
الفوائد
- تعمل بدون أطر عمل
- متوافقة مع جميع المتصفحات
- تغليف الأنماط
- قابلة لإعادة الاستخدام عبر المشاريع
مثال
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
المكتبات
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)