مكونات الويب في العالم الحقيقي (الجزء 2)

لقد مر أكثر من عام منذ منشوري "Web Components in the Real World" وقد جمعت ملاحظات جديدة لما لا يزال خطأ في هذه التكنولوجيا. ربما تسمح هذه النقاط لشخص ما بتجنب طريق مسدود لمشاريعه.

_{تصوير براندون موليتوينيك على Unsplash}

HTML معطل

يحتوي HTML على العديد من الميزات المفيدة التي تتيح لك تنفيذ الوظائف دون استخدام JavaScript. إحدى هذه الميزات هي القدرة على إرسال نموذج عن طريق الضغط على مفتاح Enter في أي حقل إدخال. هذا مثال:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <button>Send!</button>
</form>

ندخل النص ، نضغط على Enter ، يتم إرسال البيانات إلى الخادم ، بدون JavaScript. إذا رغبت في ذلك ، يمكنك تجنب إعادة تحميل الصفحة وإرسال البيانات عبر AJAX ، ولكن في هذه الحالة سيكون مقدار JS ضئيلًا.

لنحاول الآن استبدال زر عادي بمكون ويب:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <my-button>Send!</my-button>
</form>

my-buttonيحتوي مكون الويب على نفس الزر داخل نفسه ، ولا توجد فروق مرئية. لكن تقديم النموذج بالضغط على Enter كسر! هنا عرض يمكنك رؤيته بنفسك.

? -, . , . , : Javascript, , -. , - 8 , production-ready.

, -. HTML , label. , , . -! :

<label>First name: <input type="text"></label>
<label>Last name: <my-input></label>

, input "First name", "Last name" - . ! 2 , . – label input . , ? , - -, - ( , ShadowDOM).

CSP

" , ". CSP – , . CSP <style></style> , <link rel="stylesheet"> (, style- , 'unsafe-inline', , ).

-? , ShadowDOM , , ShadowDOM style-, CSP. - : Stencil () LitElement ().

– Constructable Stylesheets API, ShadowDOM unsafe-inline. – CSP, -.

Lifecycle-

, . , ( material-web-components):

<my-menu>
    <my-menu-item />
    <my-menu-item />
</my-menu>

- . connectedCallback. - DOM . , . :

class MyMenu extends HTMLElement {
    connectedCallback() {
        console.log('my menu')
    }
}

class MyMenuItem extends HTMLElement {
    connectedCallback() {
        console.log('my menu item')
    }
}

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

, :

"my menu"
"my menu item"
"my menu item"

connectedCallback , . , . , :

"my menu item"
"my menu item"
"my menu"

? my-menu ? HTML ,

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

// 
customElements.define('my-menu-item', MyMenuItem)
customElements.define('my-menu', MyMenu)

, connectedCallback. , , . " " , window.setTimeout . " " , . -

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

الاستنتاجات

هناك مكابس منتشرة في جميع أنحاء مكونات الويب ، يتم رشها بذكاء مع تسويق Google. لا يزال هناك العديد من المشكلات التي لم يتم حلها في المعيار والتي يمكن أن تكون عقبة لا يمكن التغلب عليها لمشاريعك. قد يكون من المفيد معرفة المزالق المحتملة مسبقًا من أجل اتخاذ قرار أكثر استنارة سواء باستخدام مكونات الويب وأطر العمل القائمة عليها ، أو الالتزام بنهج HTML / JS / CSS القديم البسيط. أتمنى أن يكون هذا المقال مفيدًا ، شكرًا على القراءة!