عناصر مخصصة لمكونات الويب

لقد كتبت أول عنصر مخصص لي باستخدام مكتبة CSS تسمى CSS Doodle. إنه تطبيق مذهل يستخدم Custom Elements للسماح لك بإنشاء رسوم متحركة مذهلة لـ CSS. فتح ذلك رغبة جديدة تمامًا في اكتشاف كيفية عمل هذا الشيء تحت الغطاء. لذلك قررت أن ألقي نظرة أفضل على مكونات الويب بشكل عام ، وهو موضوع طلب مني كثير من الناس أن أكتب عنه.

تتيح لنا العناصر المخصصة إنشاء علامات HTML جديدة.

لم أستطع أن أتخيل لماذا يمكن أن يكون هذا شيئًا مفيدًا حتى استخدمت مكتبة CSS Doodle. بعد كل شيء لدينا بالفعل الكثير من العلامات.

يغطي هذا البرنامج التعليمي الإصدار 1 من العناصر المخصصة ، وهو أحدث إصدار من المعيار وقت كتابة هذا التقرير

باستخدام Custom Elements ، يمكننا إنشاء علامة HTML مخصصة مع CSS و JavaScript المرتبطين.

إنه ليس بديلاً لأطر مثل React أو Angular أو Vue ، لكنه مفهوم جديد تمامًا.

الwindowيعرض الكائن العالمي أcustomElementsالخاصية التي تتيح لنا الوصول إلىCustomElementRegistryموضوع.

الCustomElementRegistryموضوع

يحتوي هذا الكائن على عدة طرق يمكننا استخدامها لتسجيل العناصر المخصصة والاستعلام عن العناصر المخصصة المسجلة بالفعل:

• define()تستخدم لتعريف عنصر مخصص جديد
• get()تستخدم للحصول على مُنشئ العنصر المخصص (إرجاعundefinedإن لم يكن موجودًا)
• upgrade()لترقية عنصر مخصص
• whenDefined()تستخدم للحصول على مُنشئ العنصر المخصص. مشابه لget()، ولكنه يُرجع وعدًا بدلاً من ذلك ، والذي يتم حله عند توفر العنصر.

كيفية إنشاء عنصر مخصص

قبل أن نتمكن من الاتصال بـwindow.customElements.define()الطريقة ، يجب علينا تحديد عنصر HTML جديد عن طريق إنشاء فئة جديدة توسع فئة HTMLElement المضمنة:

class CustomTitle extends HTMLElement {
	//...
}

داخل منشئ الفصل الذي سنستخدمهالظل DOMلربط CSS وجافا سكريبت و HTML المخصص بعلامتنا الجديدة.

بهذه الطريقة ، كل ما سنراه في HTML هو علامتنا ، لكن هذا سيغلف الكثير من الوظائف.

نبدأ بتهيئة المُنشئ:

class CustomTitle extends HTMLElement {
  constructor() {
    super()
    //...
  }
}

ثم نسميه بداخلهattachShadow()طريقة HTMLElement بتمرير كائن بامتدادmodeتعيين الخاصية إلى'open'. تحدد هذه الخاصية وضع التغليف لـ Shadow DOM. إذا كان كذلكopenيمكننا الوصول إلىshadowRootخاصية عنصر. إذا كان مغلقًا ، فلا يمكننا ذلك.

إليك كيفية القيام بذلك:

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

ستجد بعض الأمثلة تستخدم بناء الجملةconst shadowRoot = this.attachShadow(/* ... */)ولكن يمكنك تجنب ذلك ما لم تحددmodeإلىclosed، حيث يمكنك دائمًا الرجوع إلى هذا الكائن عن طريق الاتصالthis.shadowRoot.

وهو ما سنفعله الآن ، لتعيين لغة HTML الداخلية لها:

class CustomTitle extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <h1>My Custom Title!</h1>
    `
  }
}

يمكنك إضافة أي عدد تريده من العلامات ، فأنت لست مقيدًا بعلامة واحدة داخلinnerHTMLمنشأه

الآن نضيف هذا العنصر المحدد حديثًا إلىwindow.customElements:

window.customElements.define('custom-title', CustomTitle)

ويمكننا استخدام<custom-title></custom-title>عنصر مخصص في الصفحة!

ملاحظة: لا يمكنك استخدام علامات الإغلاق الذاتي (بمعنى آخر: هذا<custom-title />غير مسموح به بالمعيار)

لاحظ ال-اندفاعة في اسم العلامة.نحن مطالبون باستخدام شرطةفي عنصر مخصص. هذه هي الطريقة التي يمكننا بها اكتشاف علامة مضمنة من علامة مخصصة.

الآن لدينا هذا العنصر في الصفحة ، ويمكننا فعل ما نفعله بالعلامات الأخرى: استهدفه باستخدام CSS وجافا سكريبت!

قم بتوفير CSS مخصص للعنصر

في المنشئ ، يمكنك تمرير ملفstyleبالإضافة إلى علامة HTML التي تحدد المحتوى ، وبداخلها يمكنك الحصول على Custom Element CSS:

class CustomTitle extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <style>
        h1 {
          font-size: 7rem;
          color: #000;
          font-family: Helvetica;
          text-align: center;
        }
      </style>
      <h1>My Custom Title!</h1>
    `
  }
}

إليك مثال العنصر المخصص الذي أنشأناه في Codepen:

انظر القلممكونات الويب ، عنواني المخصصبقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.