Haloooo! Gimana kabar teman-teman? Maaf ya sudah 3 minggu lebih tidak ada artikel sama sekali. Oke, jadi pada kesempatan kali ini saya ingin berbagi ilmu tentang web component.
Apakah kamu sudah tau apa itu web komponen? dilansir dari MDN berikut ini penjelasannya.
“Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.”
Keuntungan utama dari web komponen ini adalah kita bisa menggunakan komponen lebih dari satu kali atau sering disebut dengan reusable. Nah, kalau teman-teman pernah menggunakan framework semacam angular, react ataupun vue pasti sudah mengenal apa itu komponen.
Untuk fitur lebih lanjutnya ada juga shadow DOM yang ringkasnya adalah kita membuat sebuah dom yang terenkapsulasi dari DOM biasa, jadi kita tidak bisa mengedit atau menambahkan style dari luar karena komponen tersebut sudah terenkapsulasi.
Jadi pada artikel ini saya menggunakan vanilla javascript atau javascript biasa tanpa framework sama sekali. Tujuan utama dari artikel ini adalah supaya kita bisa membuat web komponen dan menerapkan shadow dom.
Okee, pertama kita buat sebuah project sederhana seperti berikut ini.
Selanjutnya kita coba buat terlebih dahulu tanpa menggunakan web komponen. Jadi masih murni html dan css saja.
Berikut ini kode tampilan menggunakan html dan css pada kode commit di bawah ini.
Selanjutnya kita coba membuat web komponen dimulai dari menu navbar terlebih dahulu.
Ringkasnya seperti gambar diatas. Jadi kita buat class NavBar dengan extends dari HTMLElement. Kemudian kita panggil constructor dari HTMLElement dengan memangil parentnya yaitu super(). Setelah itu kita buat fungsi render(), kita pindahkan style css dan element html pada fungsi ini. Setelah itu kita panggil fungsi render() ini pada fungsi connectedCallback() { //code }, nah untuk connectedCallback ini emang sudah bawaan dari sana jadi tinggal kita gunakan saja.
Langkah terakhir kita definisikan web komponen navbar tersebut dengan menginisiasi namanya nav-bar dari class NavBar.
Kemudian kita tinggal memanggil komponen yang telah kita buat di index.html seperti berikut ini. Jangan lupa untuk menambahkan script dari komponen yang telah kita buat.
Tinggal kita buat komponen untuk lainnya supaya lebih ringkas dan reusable.
Berikut ini kode untuk komponen section.
Jangan lupa untuk mengupdate index.html
Lebih ringkas bukan? yap tentu sekali. Untuk mengetest apakah komponen berhasil kita buat coba jalankan live server.
Oke, sampai tahap ini sudah berhasil membuat komponen. Trus gimana caranya supaya komponen tersebut stylenya tidak bisa diubah dari luar? Hmmm, kita bisa menerapkan shadow DOM. Jadi ketika komponen yang kita buat sudah terenkapsulasi maka komponen tersebut tidak bisa dirubah dari luar.
Langsung saja buka file komponen yang telah kamu buat. Pada construstur tambahkan kode berikut ini.
constructor() {
super();
this._shadowDom = this.attachShadow({mode: 'open'});
}
Tujuannya adalah kita menginisasi shadow DOM pada variabel _shadowDom. Selanjutnya edit kode pada fungsi render() yang awalnya this.innerHTML menjadi this._shadowDom.innerHTML.
Untuk mengecek apakah sudah berhasil apa belum dalam menerapkan shadow dom bisa cek menggunakan inspect element komponen yang dipilih.
Nah jika sudah ada shadow-root berarti kita sudah berhasil menggunakan shadow dom untuk komponen kita.
Berikut ini full codenya untuk topik web komponen.
Oke, mungkin itu saja yang dapat saya sampaikan pada artikel kali ini. Jika ada masukan atau saran bisa langsung kirim email ke afifalfiano2@gmail.com atau komen dibawah ini.
Terimakasih, Semoga bermanfaat 😊
Referensi
#WebComponent #HTML #CSS #Javascript