Kita dapat membuat elemen HTML kustom, yang dideskripsikan dengan sebuah kelas, dengan method dan properties-nya sendiri, events, dan sebagainya. Setelah elemen kustom didefiniskan, kita dapat menggunakannya seperti elemen HTML bawaan. Itu bagus, karena kamus HTML itu kaya, tetapi tidak terbatas. Tidak ada Kita bisa mendefinisikan elemen HTML kustom dengan sebuah kelas khusus dan kemudian menggunakannya seolah-olah sudah menjadi bagian dari HTML. Ada dua jenis custom elements:
Pertama kita akan membahas Autonomus elements dan kemudian beralih ke Customized built-in elements. Untuk membuat sebuah elemen kustom, kita perlu memberi tahu browser beberapa detail mengenai: cara menampilkannya, apa yang harus dilakukan saat elemen ditambahkan atau dihapus ke halaman, dll. Itu dilakukan dengan membuat kelas dengan method khusus. Ini mudah, karena hanya ada beberapa method, dan semuanya opsional. Berikut gambaran dengan method lengkapnya:
Setelah itu, kita perlu mendaftarkan elemen tersebut:
Sekarang untuk setiap elemen HTML dengan tag Custom element name must contain a hyphen Nama elemen kustom harus memiliki
tanda hubung Itu untuk memastikan bahwa tidak ada konflik nama antara elemen HTML bawaan dan kustom. Contoh: “time-formatted”Misalnya, sudah ada elemen Mari buat elemen
Custom elements upgrade Jika browser menemukan elemen seperti elemen “undefined” yang bisa diberi style menggunakan CSS selector Saat Untuk mendapatkan informasi tentang elemen kustom, ada methods:
Rendering in Dalam contoh di atas, konten elemen dirender (dibuat) di Mengapa tidak di Alasannya sederhana: ketika Selain itu, jika anda memikirkannya, itu lebih baik dari segi kinerja – menunda pekerjaan sampai benar-benar dibutuhkan.
Mengamati atributDalam implementasi Kita bisa mengamati atribut dengan memberikan daftarnya di static getter ʻobservedAttributes () Ini adalah
Urutan RenderingKetika HTML parser membangun DOM, elemen diproses satu demi satu, Induk sebelum anak. Misalnya. jika kita memiliki Itu mengarah pada konsekuensi penting untuk elemen kustom. Misalnya, jika elemen khusus mencoba mengakses
Jika anda menjalankannya, Itu persis terjadi karena tidak ada anak pada tahap itu, DOM belum selesai. HTML parser menghubungkan
elemen kustom Jika kita ingin meneruskan informasi ke elemen kustom, kita dapat menggunakan atribut. Atribut-atribut tersebut langsung tersedia. Atau, jika kita benar-benar membutuhkan anak, kita dapat menunda akses ke mereka dengan Ini bekerja :
Sekarang Di sisi lain, solusi ini juga belum sempurna. Jika elemen kustom bersarang juga menggunakan Jadi elemen outer menyelesaikan inisialisasinya sebelum elemen inner. Mari kita tunjukkan itu pada contoh:
Urutan keluaran:
Kita dapat melihat dengan jelas bahwa elemen outer
menyelesaikan inisialisasi Tidak ada callback bawaan yang terpicu setelah elemen bersarang siap. Jika perlu, kita bisa menerapkannya sendiri. Misalnya, elemen inner bisa mengirimkan events seperti Customized built-in elementsElemen baru yang kita buat, seperti Tapi hal seperti itu bisa jadi penting. Misalnya, mesin telusur akan tertarik untuk mengetahui bahwa kita benar-benar menunjukkan waktu. Dan jika kita membuat sebuah tombol khusus, mengapa tidak menggunakan kembali fungsionalitas Kita dapat meng-extend dan menyesuaikan elemen bawaan HTML dengan mewarisi dari kelasnya. Misalnya, tombol adalah instances dari
Berikut contoh lengkapnya:
Tombol baru kita meng-extends tombol bawaan. Jadi, style dan fitur standar tetap sama seperti atribut Referensi
RingkasanElemen kustom dapat terdiri dari dua jenis:
Elemen kustom didukung dengan baik di antara browser. Edge agak tertinggal, tetapi ada polyfill https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs. |