Lihat penawaran kami. Get now!!

Pengenalan Web component dan cara membuat Custom element

Web component merupakan salah satu fitur yang sangat bermanfaat , dengan adanya web component kita dapat membuat komponen yang reusable.

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 membuah sebuah component 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 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 menggunakan 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 mengerjaka 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 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 memeberi 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 ❤️😁

Baca juga :
Mau donasi lewat mana? Paypal Trakteer
BRI - Kevin Alfito (4152 0103 0882 532)
JAGO - Kevin Alfito (1023 6984 8254)
LineBank - Kevin Alfito (12324728800)
Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas
Student, Blogger

Posting Komentar

Komentar blog
© 2021 - Kevin Tekno. All rights reserved. Distributed by Infinity Blogger