Digital Transformation
Web Components
TL;DR: Web Components adalah standar resmi browser yang memungkinkan kamu membuat elemen HTML kustom yang dapat dipakai ulang lintas proyek, tanpa bergantung pada framework tertentu. Tiga pilarnya: Custom Elements, Shadow DOM, dan HTML Template.
Apa itu Web Components?
Web Components adalah sekumpulan standar web native yang membuat browser bisa mengenali elemen buatan sendiri, misalnya <harga-card>, seolah-olah itu tag bawaan HTML. Anggap saja seperti membuat balok Lego sendiri yang bisa dipasang di proyek mana pun, baik proyek React, Vue, maupun HTML polos. Inti teknisnya bersandar pada Atomic Design untuk mendefinisikan tag dan Shadow DOM untuk mengisolasi gaya serta struktur internal.
Tiga Pilar Utama
| Pilar | Fungsi |
|---|---|
| Custom Elements | Mendaftarkan tag HTML baru beserta perilakunya |
| Shadow DOM | Mengisolasi CSS dan markup agar tidak bocor ke halaman |
| HTML Template | Mendefinisikan potongan markup yang bisa diklon berulang |
Kenapa Penting?
Web Components menjawab masalah klasik: komponen UI yang sulit dipindahkan antar-proyek karena terikat pada satu framework. Untuk bisnis yang ingin aset UI tahan lama, standar native ini mengurangi risiko ketergantungan vendor. Dalam praktik membangun antarmuka, saya melihat pola Design System lebih awet bila primitive-nya berbasis standar browser, bukan API framework yang bisa berubah. Dokumentasi lengkap tersedia di MDN Web Components.
Pertanyaan Umum
Apakah Web Components menggantikan React?
Tidak. Keduanya bisa hidup berdampingan. React mengelola state aplikasi, sementara Web Components cocok untuk elemen UI lintas-framework yang dipakai ulang.
Apakah Web Components bagus untuk SEO?
Konten di dalam Shadow DOM kini umumnya bisa dirender dan diindeks, tetapi untuk konten kritis SEO, render di sisi server tetap praktik paling aman.