Technical Tutorials

في مشهد الواجهة الأمامية الحديث، يبتعد المطورون بشكل متزايد عن مكتبات واجهة المستخدم الخاصة بالإطارات نحو حلول قياسية ومتداخلة. هنا يأتي دور مكونات الويب: مجموعة من التقنيات المختلفة التي تتيح لك إنشاء عناصر مخصصة قابلة لإعادة الاستخدام. بينما جعلت أطر العمل مثل React و Vue و Angular الهندسة القائمة على المكونات شائعة، تعمل مكونات الويب بشكل أصلي في المتصفح دون الحاجة إلى التجميع أو الحزم. في هذا الدليل، سنستكشف الركيزتين الأساسيتين لمكونات الويب—العناصر المخصصة و Shadow DOM—ونبني مكوناً وظيفياً ومعزولاً من الصفر.

فهم المفاهيم الأساسية

لبناء مكونات ويب بفعالية، يجب أن تفهم التمييز بين العناصر المخصصة و Shadow DOM. تُعد العناصر المخصصة العمود الفقري، حيث تتيح لك تعريف وسوم HTML الخاصة بك (مثل <my-button>) والتعامل مع دورة حياة العنصر في المتصفح. يوفر Shadow DOM عزلاً للتنسيقات والهيكل، مما يضمن عدم تسرب تنسيقات وعلامات المكون الخاص بك إلى الخارج، وألا تتأثر ببقية الصفحة.

من خلال الجمع بين هذين العنصرين، تحقق تجزئة حقيقية. يصبح المكون وحدة ذاتية المحتوى يمكن وضعها في أي مشروع، بغض النظر عن مجموعة التقنيات الأساسية المستخدمة.

الخطوة 1: إنشاء فئة العنصر المخصص

الخطوة الأولى هي إنشاء فئة JavaScript تمتد من HTMLElement. ستحدد هذه الفئة سلوك وعمر العنصر المخصص الخاص بك. سنبدأ بإنشاء مكون بسيط لـ "بطاقة معلومات". سيعرض هذا المكون عنواناً، وأيقونة، ووصفاً.

إليك الهيكل الأساسي لفئتنا:

class InfoCard extends HTMLElement {
  constructor() {
    super();
    // Attach Shadow DOM here in the next step
  }

  connectedCallback() {
    // This method is called when the component is added to the DOM
    this.render();
  }
}

تعد طريقة دورة الحياة connectedCallback حاسمة. فهي تعمل كمكافئ لـ componentDidMount في React، مما يشير إلى أن العنصر أصبح الآن جزءاً من المستند وجاهزاً للعرض.

الخطوة 2: تنفيذ عزل Shadow DOM

لضمان ظهور المكون وسلوكه بشكل مستقل عن المستند الأب، نحتاج إلى إرفاق جذر Shadow. نفعل ذلك داخل الدالة الإنشائية عن طريق استدعاء this.attachShadow(). يسمح الوضع 'open' بالوصول إلى جذر الظل عبر JavaScript من خارج المكون، وهو مفيد لتصحيح الأخطاء، على الرغم من أن 'closed' يوفر عزلاً أكثر صرامة.

class InfoCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    // Define internal styles and markup
    this.shadowRoot.innerHTML = `
      
      
        System Alert
        This is a native Web Component.
      
    `;
  }
}

لاحظ استخدام نطاق CSS. لأن هذه التنسيقات موجودة داخل Shadow DOM، فلن تؤثر على ورقة الأنماط العالمية، ولن تؤثر الأنماط العالمية على الهيكل الداخلي للمكون. وهذا يحل واحدة من أكثر المشاكل استمرارية في تطوير الويب: تعارض التنسيقات.

الخطوة 3: تسجيل العنصر

تعريف الفئة ليس كافياً؛ يحتاج المتصفح إلى معرفة أن <info-card> يشير إلى فئتنا المخصصة. نستخدم customElements.define() لتسجيل المكون. من المهم ملاحظة أن أسماء العناصر المخصصة يجب أن تحتوي على شرطة (-) (على سبيل المثال، info-card) لتجنب التعارض مع عناصر HTML الأصلية المستقبلية.

customElements.define('info-card', InfoCard);

بمجرد التسجيل، يمكنك استخدام الوسم <info-card></info-card> في أي مكان في جسم HTML الخاص بك. سيتم إنشاء المكون وعرضه تلقائياً.

الخاتمة

بناء مكونات الويب ليس مجرد تعلم واجهة برمجة تطبيقات جديدة؛ بل هو اعتماد فلسفة للكود القابل لإعادة الاستخدام والمتوافق مع المعايير. من خلال الاستفادة من العناصر المخصصة و Shadow DOM، تقوم بإنشاء عناصر واجهة مستخدم قوية وغير مرتبطة بإطار عمل معين. بينما يستخدم هذا المثال الأساسي innerHTML لل simplicity، في بيئات الإنتاج، قد تفكر في استخدام حرفيات القوالب أو استيراد HTML للحصول على أداء وقابلية صيانة أفضل.

مع استمرار تطور معايير المتصفح، أصبحت مكونات الويب العمود الفقري للويب الحديث. سواء كنت تبني نظام تصميم، أو مكتبة، أو تطبيق صفحة واحدة، فإن إتقان هذه الأساسيات سيجعلك مطور واجهة أمامية أكثر تنوعاً وفعالية.