💡 ULASAN & REFERENSI • DIPERBARUI: 26 October 2026 • REDAKSI AZWINN

Tutorial HTML Web Components: Custom Elements & Shadow DOM

HTML Web Components adalah kumpulan standar teknologi web yang memungkinkan Anda membuat elemen kustom yang dapat digunakan kembali (reusable custom elements) dengan fungsionalitas terenkapsulasi terpisah dari sisa dokumen DOM. Teknologi ini dibangun di atas tiga spesifikasi utama browser modern: Custom Elements, Shadow DOM, dan HTML Templates.

Untuk membangun Web Component pertama, Anda perlu mendefinisikan sebuah kelas JavaScript yang memperluas kelas dasar HTMLElement. Di dalam kelas tersebut, siklus hidup komponen (lifecycle callbacks) seperti connectedCallback digunakan untuk menentukan apa yang terjadi saat elemen dimasukkan ke dalam DOM.

Komponen Utama HTML Web Components

Sebelum menulis kode, pahami tiga pilar utama yang menyusun arsitektur Web Components:

Teknologi Fungsi Utama Standar Browser
Custom Elements API JavaScript untuk mendefinisikan elemen HTML baru dan perilakunya. Didukung penuh di semua browser modern
Shadow DOM Enkapsulasi DOM dan CSS agar gaya komponen tidak bocor keluar atau masuk. Didukung penuh di semua browser modern
HTML Templates Tag <template> dan <slot> untuk markup yang di-clone. Didukung penuh di semua browser modern

Contoh Pembuatan Custom Element

Berikut adalah implementasi nyata kode HTML dan JavaScript untuk membuat komponen kartu sapaan kustom bernama <user-card>.

<!-- Penggunaan di file HTML utama -->
<user-card name="Ahmad Fauzi" role="Frontend Developer"></user-card>

<script>
class UserCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    const name = this.getAttribute('name') || 'Guest';
    const role = this.getAttribute('role') || 'Contributor';
    
    this.shadowRoot.innerHTML = `
      <style>
        .card {
          font-family: sans-serif;
          background: #f9f9f9;
          border: 1px solid #ddd;
          border-radius: 8px;
          padding: 16px;
          max-width: 300px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h3 { margin: 0 0 8px 0; color: #333; }
        p { margin: 0; color: #666; font-size: 14px; }
      </style>
      <div class="card">
        <h3>${name}</h3>
        <p>${role}</p>
      </div>
    `;
  }
}

// Mendaftarkan elemen kustom ke browser
customElements.define('user-card', UserCard);
</script>

Langkah-Langkah Implementasi Teknis

  1. Buat Kelas JavaScript: Buat kelas ES6 yang menginheritance HTMLElement. Gunakan metode constructor() untuk inisialisasi awal.
  2. Pasang Shadow DOM: Panggil this.attachShadow({ mode: 'open' }) di dalam constructor guna mengisolasi struktur DOM dan styling internal dari halaman utama.
  3. Definisikan Template/Markup: Masukkan struktur HTML dan CSS ke dalam this.shadowRoot.innerHTML atau gunakan tag <template> yang di-clone menggunakan document.importNode().
  4. Daftarkan Elemen: Daftarkan tag kustom Anda menggunakan fungsi global customElements.define('nama-tag', NamaKelas). Pastikan nama tag mengandung tanda hubung (-) sesuai spesifikasi W3C.
  5. Gunakan di HTML: Panggil elemen tersebut di dalam dokumen HTML layaknya tag standar seperti <div> atau <span>.

Tips Troubleshooting Lapangan

Kendala yang sering ditemui saat mengembangkan Web Components meliputi:

  • Nama Tag Tanpa Tanda Hubung: Browser akan membuang elemen atau gagal merender jika nama custom element tidak memiliki garis bawah/tengah (contoh: <usercard> salah, yang benar <user-card>).
  • Atribut Belum Terbaca di Constructor: Atribut HTML seringkali belum tersedia saat constructor dipanggil. Gunakan siklus hidup connectedCallback() untuk membaca atribut atau merespon perubahan data.
  • Global CSS Masuk ke Shadow DOM: Gaya CSS dari halaman utama tidak akan menembus Shadow DOM (kecuali variabel CSS / CSS Custom Properties yang diwariskan). Hal ini disengaja untuk menjaga enkapsulasi.

🔍 Orang Lain Juga Mencari Ini