Sebagai developer, Anda mungkin pernah mengalami situasi ini: membuat komponen tombol yang sama berulang kali di proyek berbeda, atau kesulitan berbagi komponen antar tim yang menggunakan framework berbeda. Web Components hadir sebagai solusi standar bawaan browser untuk membangun komponen reusable yang bisa dipakai di mana saja.
Berbeda dengan library atau framework seperti React, Vue, atau Svelte, Web Components bukanlah teknologi tambahan. Ia adalah standar web resmi yang didukung langsung oleh browser modern, sehingga Anda tidak perlu menginstal dependensi besar hanya untuk membuat komponen.
Apa Itu Web Components?
Web Components adalah sekumpulan API bawaan browser yang memungkinkan Anda membuat elemen HTML custom dengan perilaku dan gaya yang terenkapsulasi. Komponen yang Anda buat bisa dipakai di halaman mana pun, bahkan di proyek yang menggunakan framework berbeda sekalipun.
Kelebihan utamanya adalah interoperabilitas. Satu komponen Web Components bisa dipakai di React, Vue, Angular, atau HTML polos tanpa perlu diubah. Ini sangat berguna untuk tim yang memiliki banyak proyek dengan teknologi berbeda, atau saat membangun design system perusahaan.
Karena merupakan standar web, Web Components juga tidak terikat pada versi tertentu. Komponen yang Anda buat hari ini kemungkinan besar tetap akan berjalan bertahun-tahun ke depan tanpa perlu dimigrasi.
Tiga Pilar Utama Web Components
Web Components dibangun di atas tiga teknologi inti yang saling melengkapi:
1. Custom Elements
Custom Elements memungkinkan Anda mendefinisikan tag HTML baru dengan perilaku khusus. Misalnya, Anda bisa membuat elemen <my-button> yang berfungsi seperti tombol biasa tetapi dengan gaya dan logika sendiri.
2. Shadow DOM
Shadow DOM menyediakan enkapsulasi penuh untuk gaya dan struktur komponen. CSS di dalam komponen tidak akan bocor ke luar, dan CSS halaman induk tidak akan masuk ke dalam komponen. Ini menyelesaikan masalah klasik konflik gaya yang sering memusingkan developer.
3. HTML Templates
Elemen <template> memungkinkan Anda menyiapkan potongan markup yang tidak dirender langsung oleh browser, lalu digunakan kembali kapan saja melalui JavaScript. Sangat berguna untuk membuat struktur komponen yang kompleks.
Membuat Web Component Pertamamu
Berikut contoh sederhana membuat komponen kartu profil dengan Web Components:
class ProfileCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
.card {
padding: 16px;
border-radius: 8px;
background: #f5f5f5;
font-family: sans-serif;
}
</style>
<div class="card">
<h3><slot name="name"></slot></h3>
<p><slot name="role"></slot></p>
</div>
`;
}
}
customElements.define('profile-card', ProfileCard);Setelah didefinisikan, komponen ini bisa langsung dipakai di HTML:
<profile-card>
<span slot="name">Muhamad Widiono</span>
<span slot="role">Web Developer</span>
</profile-card>Perhatikan penggunaan <slot> — elemen ini memungkinkan Anda menyisipkan konten dari luar ke dalam komponen, sehingga komponen tetap fleksibel.
Keunggulan Web Components dibanding Framework
Web Components menawarkan beberapa kelebihan dibanding pendekatan berbasis framework:
- Tanpa dependensi berat — cukup browser, tidak perlu bundler atau library eksternal.
- Kompatibilitas universal — bisa dipakai di React, Vue, Angular, Svelte, atau HTML biasa.
- Umur panjang — standar web tidak berubah drastis seperti API framework.
- Enkapsulasi alami — Shadow DOM menjaga gaya dan struktur tetap terisolasi.
- Performa ringan — tidak ada runtime tambahan yang membebani halaman.
Banyak perusahaan besar memakai Web Components untuk design system mereka, termasuk Google dengan Material Web, SAP, dan Salesforce. Pendekatan ini terbukti efektif untuk menjaga konsistensi tampilan di banyak aplikasi sekaligus.
Kapan Sebaiknya Menggunakan Web Components?
Web Components paling cocok digunakan dalam situasi berikut:
- Membangun design system atau library komponen yang harus dipakai di banyak proyek.
- Menyematkan widget ke situs pihak ketiga tanpa bergantung pada framework tertentu.
- Membuat komponen yang harus bertahan lama dan tidak ingin terikat pada siklus rilis framework.
- Tim dengan beragam teknologi yang membutuhkan satu standar komponen bersama.
Namun, untuk aplikasi yang sangat interaktif dan kompleks, framework seperti React atau Vue tetap menawarkan ekosistem dan alat pengembangan yang lebih matang. Web Components bukan pengganti framework, melainkan pelengkap yang bisa digunakan bersamaan.
Lifecycle Callback pada Web Components
Web Components menyediakan beberapa lifecycle callback yang memungkinkan Anda menjalankan kode pada momen tertentu. Memahami callback ini penting agar komponen Anda berperilaku benar.
- connectedCallback — dipanggil saat elemen dimasukkan ke dokumen. Cocok untuk inisialisasi data atau memulai pengambilan data.
- disconnectedCallback — dipanggil saat elemen dilepas dari dokumen. Berguna untuk membersihkan timer atau membatalkan langganan event.
- attributeChangedCallback — dipanggil saat atribut yang diamati berubah. Cocok untuk merespons perubahan properti dari luar.
- adoptedCallback — dipanggil saat elemen dipindahkan ke dokumen lain.
Dengan memanfaatkan callback ini, Anda bisa membuat komponen yang efisien dan tidak menimbulkan kebocoran memori. Misalnya, hentikan permintaan jaringan saat komponen sudah tidak lagi dipakai, atau perbarui tampilan saat properti berubah.
Selain itu, Web Components juga mendukung fitur customized built-in elements yang memungkinkan Anda memperluas elemen HTML standar seperti <button> atau <img> dengan perilaku tambahan. Ini membuka kemungkinan untuk meningkatkan elemen native tanpa menggantinya sepenuhnya.
Kesimpulan
Web Components adalah teknologi yang wajib dipahami developer web modern. Dengan kemampuan membuat komponen reusable yang berjalan di mana saja, Anda bisa menghemat waktu, mengurangi duplikasi kode, dan membangun sistem yang lebih konsisten.
Mulailah dengan komponen sederhana seperti tombol, kartu, atau notifikasi. Kuasai tiga pilar utamanya, lalu manfaatkan untuk design system tim Anda. Di dunia development yang terus berubah, Web Components adalah investasi keterampilan yang tidak akan cepat usang.
