Panduan Tentang Komponen Web

Apa Itu Komponen Web?

Penjelasan paling sederhana untuk komponen web adalah cara untuk membuat dan menggunakan komentar yang disesuaikan dan modular dalam aplikasi web. Hal ini dilakukan dengan cara memadukan blending dengan HTML. Mengimpor komponen web adalah cara untuk menggunakan fungsionalitas dengan cepat menggunakan perpustakan elemen prefabrikasi HTML yang besar. Konsep perpustakan yang menyediakan widget bukanlah hal baru. Jquery dan Bootstrap membuat contoh bagus dalam hal ini. Tetapi, contoh-contoh ini hanya berhasil karena sesuai dengan sifat HTML, CSS, dan JS. Jika tidak sesuai, maka sebaiknya tidak memaksakan dengan adaptasi modular. Spesifikasi HTML5 memiliki seperangkat fitur baru yang membuat pendekatan modular ini menjadi pilihan yang tepat. Komponen web memungkinkan elemen HTML berfungsi penuh.

Mengapa Komponen Web Cukup Berharga?

Konsep komponen web untuk penggunaan dalam pengembangan aplikasi web memerlukan inspirasi dari ranah pengembangan software yang lebih luas. Pengembangan berbasis komponen dapat dilihat pada konsep seperti enkapsulasi dan pemisahan. Komponen web berupaya membawa ke web yang bermanfaat kepada pengembang. Manfaat utama dari pendekatan ini adalah kode yang sedikit, ini umumnya bermanfaat karena diterjemahkan ke dalam aplikasi yang lebih mudah dipertahankan sehingga lebih sedikit waktu untuk melakukan tes bug dan upgrade. Ini semua berkat struktur kode yang lebih mudah dipahami dan dinavigasi.

4 Pilar Komponen Web

Komponen web dikompromikan oleh empat standar W3C utama. Standar ini adalah template HTML, HTML import, shadow dom, dan elemen khusus. Masing-masing standar ini memiliki peran dalam komponen web dunia baru namun tidak semuanya didukung oleh bwoser utama. Masing-masing standar ini cukup terlibat secara independen namun di luar cakupan artikel ini.

Template HTML

Template HTML adalah komponen web yang paling banyak digunakan dan konsep yang cukup mudah dipahami. Templating memungkinkan sesuatu diciptakan seperti yang diisyaratkan berulang-ulang. Ini usaha minimal dengan output maksimal dan konsep yang familiar bagi banyak orang. menggunakan template sama mudahnya dengan membungkus HTML di tag <template>. Salinan ini kemudian dibuat dan ditambahkan ke dokumen utama DOM. Apa yang terbungkus di dalam tag <template> tidak diberikan.

Import HTML

Standar ini adalah teman terbaik dari template standar. Templating memungkinkan pengambilan sumber daya dan skrip yang mungkin tidak dibutuhkan saat itu dengan cara mengimpor. Mengimpor dapat memecahkan masalah ini dengan mengaktifkannya pada saat yang dibutuhkan. Selain itu, import HTML ini menyambungkan celah langsung untuk memuat HTML di seluruh laman.

Shadow Dom

Shadow Dom menangani pengangkatan berat yang memastikan konflik penamaan tidak terjadi, sumber daya digabungkan dengan prinsip enkapsulasi dan implikasi elemen khusus tersembunyi dari keseluruhan halaman. Pada tahap adopsi awal, ini mungkin tampak sepele tapi karena dukungan yang terus tumbuh maka pengembang kemungkinan akan menggunakan komponen web yang meningkatkan risiko lebih besar. Shadow Dom sedikit lebih baik dari pada HTML import

Elemen Khusus

Ini mungkin adalah pilar paling menarik. Ini memungkinkan pembuatan tag HTML yang benar-benar baru atau bahkan mentweak apa yang sudah tersedia. Mereka dapat dibuat untuk tujuan apapun dan tagnya dapat digunakan di seluruh dokumen.