Web component merupakan salah satu fitur yang sangat bermanfaat dalam pengembangan sebuah Aplikasi web, dengan adanya web component kita dapat membuat komponen yang bersifat reusable dengan demikian akan mempermudah pekerjaan kita karena kita dapat dengan mudah memasang dan mengubah isi dari komponen pada Aplikasi web.
Web component juga telah banyak di terapkan pada Framework/library Javascript yang terkenal di antaranya seperti ReactJS, Vue, dan Angular dengan framework tersebut membuat sebuah component pada web akan jauh lebih mudah.
Pada kesempatan kali ini kita akan belajar membuat web component secara sederhana dan tanpa menggunakan Framework/library yang telah di sebutkan tadi.
Apa itu Web Components ๐ง ?
Web compenent merupakan sebuah metode untuk membuat sebuah komponen UI pada web, sederhanya, Kalian dapat memisah berbagai macam komponen pada website seperti header, konten, dan footer, menjadi modul modul terpisah dan dapat di gunakan kembali. Sama halnya seperti kita membangun sebuah bangunan menggunakan lego, Web component berperan sebagai potongan lego yang dapat kalian bentuk dan pasang sesuai yang kalian inginkan, perhatikan gambar di bawah ini:
Setiap yang di garis merah pada gambar diatas dapat di jadikan komponen dan di gunakan kembali tanpa harus menulis ulang kode nya.
kebanyakan developer menggunakan framework/library untuk membuat komponen agar lebih mudah dan efisien, akan tetapi ada beberapa kelebihan membuat web component secara manual di banding menggunakan Framework, berikut ini adalah kelebihan dari menggunakan Web component:
- Standar : Web component memiliki standar jelas yang telah di tetapkan oleh W3C (World Wide Web Consortium).
- Compability : Web component dapat diterapkan pada berbagai framework Front End Javascript seperti React, Vue, dan Angular, dengan demikian kita tidak perlu belajar dari awal lagi ketika mengerjakan sebuah proyek dengan Framework berbeda.
- Simple : Penggunaan Web component tidak perlu banyak konfigurasi seperti kita menggunakan Framework pada umumnya, Karena dalam membangun Web Component kita hanya perlu Html/ Css/ JavaScript biasa.
Custom Element
Dengan menggunakan Custom Element kita dapat membuat tag HTML secara custom dan membuat struktur HTML kita menjadi lebih rapi dan mudah di baca bahkan oleh orang yang bukan pengembang web sekalipun, Lalu bagaimana cara membuat custom Element.
Membuat custom element
Untuk membuat sebuah custom element kita perlu mendeklarisakannya dengan menggunakan JavaScript class, Class tersebut akan mewarasi sifat dari Class HTMLElement.
Berikut adalah contoh membuat class custom element:
class elementGambar extends HTMLElement{}
Dengan potongan kode diatas kita telah berhasil membuat sebuah element HTML baru, Akan tetapi tak cukup sampai disana masih ada yang dibutuhkan untuk membuat sebuah element HTML, kalian perlu menetapkan tag yang nantinya akan di pakai pada HTML. Bagaimana caranya? yaitu dengan mamanggil fungsi define() dari global object cusomELement, Perhatikan kode berikut:
customElement.define('element-gambar', elementGambar);
Penjelasan kode diatas, customElements merupakan sebuah global variable yang dapat digunakan untuk mendefinisikan element kustom dan memberi tahu bahwa terdapat tag HTML baru, dalam class customElements terdapat method define(), define() menampung dua parameter yang berisi nama tag baru dan class yang menerapkan sifat HTMLElement.
- Note: agar tidak terjadi kesalahan kita harus menamakan tag custom menggunakan dua kata dan dipisahkan dengan dash (-), Hal ini diperlukan agar browser tahu perbedaan antara element asli dan element Custom
Setelah berhasil membuat custom element pada Javascript kalian harus memanggil script tersebut ke berkas HTML, kemudian kalian dapat menggunakan tag nya seperti tag HTML pada umum nya, PErhatikan contoh potongan kode di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<element-gambar></element-gambar>
<script src="./custom-element.js"></script>
</body>
</html>
class elementGambar extends HTMLElement {}
customElements.define("element-gambar", elementGambar);
Jika di buka pada browser kemudian lakukan inspect element kalian dapat melihat bahwa tag custom telah berhasil di terapkan.
Mungkin sekian dulu materi pada kali ini, kita telah mengetahui apa itu web component dan bagaimana cara membuat custom element, pada materi berikutnya kita akan membahas bagaimana cara memberi Prilaku atau fungsi pada element tersebut.
Semoga bermanfaat ❤️๐