Komponen Web di Dunia Nyata (Bagian 2)

Lebih dari satu tahun telah berlalu sejak publikasi saya "Komponen Web di Dunia Nyata" dan saya telah mengumpulkan pengamatan baru tentang apa yang masih salah dengan teknologi ini. Mungkin poin-poin ini akan memungkinkan seseorang untuk menghindari jalan buntu untuk proyek mereka.

_{Foto oleh Brandon Molitwenik di Unsplash}

HTML Rusak

HTML memiliki banyak fitur berguna yang memungkinkan Anda menerapkan fungsionalitas tanpa menggunakan JavaScript. Salah satu fitur ini adalah kemampuan untuk mengirimkan formulir dengan menekan tombol Enter di sembarang bidang masukan. Berikut contohnya:

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

Kami memasukkan teks, tekan Enter, data dikirim ke server, tidak ada JavaScript. Jika diinginkan, Anda dapat menghindari memuat ulang halaman, dan mengirim data melalui AJAX, tetapi dalam hal ini jumlah JS akan minimal.

Sekarang mari kita coba mengganti tombol biasa dengan komponen web:

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

Komponen web my-buttonberisi tombol yang sama di dalamnya, tidak ada perbedaan visual. Tapi mengirimkan formulir dengan menekan Enter bangkrut! Berikut ini demonya , Anda bisa lihat sendiri.

? -, . , . , : 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 . " " , . -

Komponen web tidak akan dapat menghentikan rendering internal spoiler. Pada saat komponen diaktifkan, gambar internal sudah mulai memuat dan menghabiskan lalu lintas Anda, meskipun Anda tidak ingin membuka spoiler ini.

kesimpulan

Ada garu yang tersebar di seluruh komponen web, yang secara cerdik ditaburi pemasaran Google. Masih banyak masalah yang belum terselesaikan dalam standar yang dapat terbukti menjadi kendala yang tidak dapat diatasi untuk proyek Anda. Akan sangat membantu untuk mengetahui tentang potensi jebakan sebelumnya untuk membuat keputusan yang lebih tepat apakah akan menggunakan komponen web dan kerangka kerja yang didasarkan padanya, atau tetap menggunakan pendekatan HTML / JS / CSS lama yang sederhana. Semoga artikel ini bermanfaat, terima kasih telah membaca!