14 September 2025Bahasa Indonesia

Penjelasan mendalam tentang siklus hidup web component, meliputi pembuatan, koneksi, perubahan atribut, dan diskoneksi custom element. Pelajari cara membangun komponen yang kuat dan dapat digunakan kembali untuk aplikasi web modern.

Siklus Hidup Web Component: Menguasai Pembuatan dan Manajemen Custom Element

Web component adalah alat yang kuat untuk membangun elemen UI yang dapat digunakan kembali dan terenkapsulasi dalam pengembangan web modern. Memahami siklus hidup web component sangat penting untuk menciptakan aplikasi yang kuat, mudah dipelihara, dan berkinerja tinggi. Panduan komprehensif ini menjelajahi berbagai tahap siklus hidup web component, memberikan penjelasan mendetail dan contoh praktis untuk membantu Anda menguasai pembuatan dan manajemen custom element.

Apa itu Web Component?

Web component adalah seperangkat API platform web yang memungkinkan Anda membuat elemen HTML kustom yang dapat digunakan kembali dengan gaya dan perilaku yang terenkapsulasi. Mereka terdiri dari tiga teknologi utama:

Custom Elements: Memungkinkan Anda untuk mendefinisikan tag HTML Anda sendiri dan logika JavaScript yang terkait.
Shadow DOM: Menyediakan enkapsulasi dengan membuat pohon DOM terpisah untuk komponen, melindunginya dari gaya dan skrip dokumen global.
HTML Templates: Memungkinkan Anda mendefinisikan potongan HTML yang dapat digunakan kembali yang dapat dikloning dan disisipkan ke dalam DOM secara efisien.

Web component mendorong penggunaan kembali kode, meningkatkan kemudahan pemeliharaan, dan memungkinkan pembangunan antarmuka pengguna yang kompleks secara modular dan terorganisir. Mereka didukung oleh semua browser utama dan dapat digunakan dengan kerangka kerja atau pustaka JavaScript apa pun, atau bahkan tanpa kerangka kerja sama sekali.

Siklus Hidup Web Component

Siklus hidup web component mendefinisikan berbagai tahap yang dilalui oleh sebuah custom element dari saat dibuat hingga dihapus dari DOM. Memahami tahap-tahap ini memungkinkan Anda untuk melakukan tindakan spesifik pada waktu yang tepat, memastikan komponen Anda berperilaku dengan benar dan efisien.

Metode inti siklus hidup adalah:

constructor(): Konstruktor dipanggil saat elemen dibuat atau di-upgrade. Di sinilah Anda menginisialisasi state komponen dan membuat shadow DOM-nya (jika diperlukan).
connectedCallback(): Dipanggil setiap kali custom element terhubung ke DOM dokumen. Ini adalah tempat yang baik untuk melakukan tugas penyiapan, seperti mengambil data, menambahkan event listener, atau merender konten awal komponen.
disconnectedCallback(): Dipanggil setiap kali custom element terputus dari DOM dokumen. Di sinilah Anda harus membersihkan sumber daya apa pun, seperti menghapus event listener atau membatalkan timer, untuk mencegah kebocoran memori.
attributeChangedCallback(name, oldValue, newValue): Dipanggil setiap kali salah satu atribut custom element ditambahkan, dihapus, diperbarui, atau diganti. Ini memungkinkan Anda untuk merespons perubahan pada atribut komponen dan memperbarui perilakunya sesuai. Anda perlu menentukan atribut mana yang ingin Anda amati menggunakan getter statis observedAttributes.
adoptedCallback(): Dipanggil setiap kali custom element dipindahkan ke dokumen baru. Ini relevan saat bekerja dengan iframe atau saat memindahkan elemen di antara bagian-bagian aplikasi yang berbeda.

Menyelami Lebih Dalam Setiap Metode Siklus Hidup

1. constructor()

Konstruktor adalah metode pertama yang dipanggil ketika instance baru dari custom element Anda dibuat. Ini adalah tempat yang ideal untuk:

Menginisialisasi state internal komponen.
Membuat Shadow DOM menggunakan this.attachShadow({ mode: 'open' }) atau this.attachShadow({ mode: 'closed' }). mode menentukan apakah Shadow DOM dapat diakses dari JavaScript di luar komponen (open) atau tidak (closed). Menggunakan open umumnya direkomendasikan untuk debugging yang lebih mudah.
Mengikat metode event handler ke instance komponen (menggunakan this.methodName = this.methodName.bind(this)) untuk memastikan bahwa this merujuk pada instance komponen di dalam handler.

Pertimbangan Penting untuk Konstruktor:

Anda tidak boleh melakukan manipulasi DOM apa pun di dalam konstruktor. Elemen tersebut belum sepenuhnya terhubung ke DOM, dan mencoba memodifikasinya dapat menyebabkan perilaku yang tidak terduga. Gunakan connectedCallback untuk manipulasi DOM.
Hindari menggunakan atribut di dalam konstruktor. Atribut mungkin belum tersedia. Gunakan connectedCallback atau attributeChangedCallback sebagai gantinya.
Panggil super() terlebih dahulu. Ini wajib jika Anda melakukan extend dari kelas lain (biasanya HTMLElement).

Contoh:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // Buat shadow root
    this.shadow = this.attachShadow({mode: 'open'});
    this.message = "Hello, world!";
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.message);
  }
}

2. connectedCallback()

connectedCallback dipanggil ketika custom element terhubung ke DOM dokumen. Ini adalah tempat utama untuk:

Mengambil data dari API.
Menambahkan event listener ke komponen atau Shadow DOM-nya.
Merender konten awal komponen ke dalam Shadow DOM.
Mengamati perubahan atribut jika pengamatan langsung di konstruktor tidak memungkinkan.

Contoh:


class MyCustomElement extends HTMLElement {
  // ... constructor ...

  connectedCallback() {
    // Buat elemen tombol
    const button = document.createElement('button');
    button.textContent = 'Klik saya!';
    button.addEventListener('click', this.handleClick);
    this.shadow.appendChild(button);

    // Ambil data (contoh)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
        this.render(); // Panggil metode render untuk memperbarui UI
      });
  }

  render() {
    // Perbarui Shadow DOM berdasarkan data
    const dataElement = document.createElement('p');
    dataElement.textContent = JSON.stringify(this.data);
    this.shadow.appendChild(dataElement);
  }

  handleClick() {
      alert("Tombol diklik!");
  }
}

3. disconnectedCallback()

disconnectedCallback dipanggil ketika custom element terputus dari DOM dokumen. Ini sangat penting untuk:

Menghapus event listener untuk mencegah kebocoran memori.
Membatalkan timer atau interval apa pun.
Melepaskan sumber daya apa pun yang dipegang oleh komponen.

Contoh:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback ...

  disconnectedCallback() {
    // Hapus event listener
    this.shadow.querySelector('button').removeEventListener('click', this.handleClick);

    // Batalkan timer apa pun (contoh)
    if (this.timer) {
      clearInterval(this.timer);
    }

    console.log('Komponen terputus dari DOM.');
  }
}

4. attributeChangedCallback(name, oldValue, newValue)

attributeChangedCallback dipanggil setiap kali atribut dari custom element diubah, tetapi hanya untuk atribut yang terdaftar di getter statis observedAttributes. Metode ini penting untuk:

Bereaksi terhadap perubahan nilai atribut dan memperbarui perilaku atau penampilan komponen.
Memvalidasi nilai atribut.

Aspek penting:

Anda harus mendefinisikan getter statis bernama observedAttributes yang mengembalikan array nama atribut yang ingin Anda amati.
attributeChangedCallback hanya akan dipanggil untuk atribut yang terdaftar di observedAttributes.
Metode ini menerima tiga argumen: name dari atribut yang berubah, oldValue, dan newValue.
oldValue akan menjadi null jika atribut baru ditambahkan.

Contoh:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback, disconnectedCallback ...

  static get observedAttributes() {
    return ['message', 'data-count']; // Amati atribut 'message' dan 'data-count'
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'message') {
      this.message = newValue; // Perbarui state internal
      this.renderMessage(); // Render ulang pesan
    } else if (name === 'data-count') {
      const count = parseInt(newValue, 10);
      if (!isNaN(count)) {
        this.count = count; // Perbarui hitungan internal
        this.renderCount(); // Render ulang hitungan
      } else {
        console.error('Nilai atribut data-count tidak valid:', newValue);
      }
    }
  }

  renderMessage() {
    // Perbarui tampilan pesan di Shadow DOM
    let messageElement = this.shadow.querySelector('.message');

    if (!messageElement) {
      messageElement = document.createElement('p');
      messageElement.classList.add('message');
      this.shadow.appendChild(messageElement);
    }

    messageElement.textContent = this.message;
  }

  renderCount(){
    let countElement = this.shadow.querySelector('.count');

    if(!countElement){
        countElement = document.createElement('p');
        countElement.classList.add('count');
        this.shadow.appendChild(countElement);
    }

    countElement.textContent = `Hitungan: ${this.count}`;
  }
}

Menggunakan attributeChangedCallback secara efektif:

Validasi Input: Gunakan callback untuk memvalidasi nilai baru untuk memastikan integritas data.
Debounce Pembaruan: Untuk pembaruan yang memakan banyak sumber daya komputasi, pertimbangkan untuk melakukan debounce pada handler perubahan atribut untuk menghindari rendering ulang yang berlebihan.
Pertimbangkan Alternatif: Untuk data yang kompleks, pertimbangkan untuk menggunakan properti alih-alih atribut dan menangani perubahan secara langsung di dalam setter properti.

5. adoptedCallback()

adoptedCallback dipanggil ketika custom element dipindahkan ke dokumen baru (misalnya, saat dipindahkan dari satu iframe ke iframe lain). Ini adalah metode siklus hidup yang lebih jarang digunakan, tetapi penting untuk mengetahuinya saat bekerja dengan skenario yang lebih kompleks yang melibatkan konteks dokumen.

Contoh:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback, disconnectedCallback, attributeChangedCallback ...

  adoptedCallback() {
    console.log('Komponen diadopsi ke dokumen baru.');
    // Lakukan penyesuaian yang diperlukan saat komponen dipindahkan ke dokumen baru
    // Ini mungkin melibatkan pembaruan referensi ke sumber daya eksternal atau membangun kembali koneksi.
  }
}

Mendefinisikan Custom Element

Setelah Anda mendefinisikan kelas custom element Anda, Anda perlu mendaftarkannya ke browser menggunakan customElements.define():


customElements.define('my-custom-element', MyCustomElement);

Argumen pertama adalah nama tag untuk custom element Anda (misalnya, 'my-custom-element'). Nama tag harus mengandung tanda hubung (-) untuk menghindari konflik dengan elemen HTML standar.

Argumen kedua adalah kelas yang mendefinisikan perilaku custom element Anda (misalnya, MyCustomElement).

Setelah mendefinisikan custom element, Anda dapat menggunakannya di HTML Anda seperti elemen HTML lainnya:


<my-custom-element message="Halo dari atribut!" data-count="10"></my-custom-element>

Praktik Terbaik untuk Manajemen Siklus Hidup Web Component

Jaga agar konstruktor tetap ringan: Hindari melakukan manipulasi DOM atau perhitungan kompleks di dalam konstruktor. Gunakan connectedCallback untuk tugas-tugas ini.
Bersihkan sumber daya di disconnectedCallback: Selalu hapus event listener, batalkan timer, dan lepaskan sumber daya di disconnectedCallback untuk mencegah kebocoran memori.
Gunakan observedAttributes dengan bijak: Hanya amati atribut yang benar-benar perlu Anda reaksikan. Mengamati atribut yang tidak perlu dapat memengaruhi kinerja.
Pertimbangkan menggunakan pustaka rendering: Untuk pembaruan UI yang kompleks, pertimbangkan menggunakan pustaka rendering seperti LitElement atau uhtml untuk menyederhanakan proses dan meningkatkan kinerja.
Uji komponen Anda secara menyeluruh: Tulis unit test untuk memastikan bahwa komponen Anda berperilaku benar di seluruh siklus hidupnya.

Contoh: Komponen Penghitung Sederhana

Mari kita buat komponen penghitung sederhana yang menunjukkan penggunaan siklus hidup web component:


class CounterComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.count = 0;
    this.increment = this.increment.bind(this);
  }

  connectedCallback() {
    this.render();
    this.shadow.querySelector('button').addEventListener('click', this.increment);
  }

  disconnectedCallback() {
    this.shadow.querySelector('button').removeEventListener('click', this.increment);
  }

  increment() {
    this.count++;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <p>Hitungan: ${this.count}</p>
      <button>Tambah</button>
    `;
  }
}

customElements.define('counter-component', CounterComponent);

Komponen ini mempertahankan variabel internal count dan memperbarui tampilan saat tombol diklik. connectedCallback menambahkan event listener, dan disconnectedCallback menghapusnya.

Teknik Web Component Tingkat Lanjut

1. Menggunakan Properti Alih-alih Atribut

Meskipun atribut berguna untuk data sederhana, properti menawarkan lebih banyak fleksibilitas dan keamanan tipe. Anda dapat mendefinisikan properti pada custom element Anda dan menggunakan getter dan setter untuk mengontrol bagaimana mereka diakses dan dimodifikasi.


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._data = null; // Gunakan properti privat untuk menyimpan data
  }

  get data() {
    return this._data;
  }

  set data(value) {
    this._data = value;
    this.renderData(); // Render ulang komponen saat data berubah
  }

  connectedCallback() {
    // Render awal
    this.renderData();
  }

  renderData() {
    // Perbarui Shadow DOM berdasarkan data
    this.shadow.innerHTML = `<p>Data: ${JSON.stringify(this._data)}</p>`;
  }
}

customElements.define('my-data-element', MyCustomElement);

Anda kemudian dapat mengatur properti data secara langsung di JavaScript:


const element = document.querySelector('my-data-element');
element.data = { name: 'John Doe', age: 30 };

2. Menggunakan Event untuk Komunikasi

Custom event adalah cara yang ampuh bagi web component untuk berkomunikasi satu sama lain dan dengan dunia luar. Anda dapat mengirimkan custom event dari komponen Anda dan mendengarkannya di bagian lain dari aplikasi Anda.


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback ...

  dispatchCustomEvent() {
    const event = new CustomEvent('my-custom-event', {
      detail: { message: 'Halo dari komponen!' },
      bubbles: true, // Izinkan event untuk menyebar ke atas pohon DOM
      composed: true // Izinkan event untuk melintasi batas shadow DOM
    });

    this.dispatchEvent(event);
  }
}

customElements.define('my-event-element', MyCustomElement);

// Dengarkan custom event di dokumen induk
document.addEventListener('my-custom-event', (event) => {
  console.log('Custom event diterima:', event.detail.message);
});

3. Styling Shadow DOM

Shadow DOM menyediakan enkapsulasi gaya, mencegah gaya bocor masuk atau keluar dari komponen. Anda dapat menata web component Anda menggunakan CSS di dalam Shadow DOM.

Gaya Inline:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>Ini adalah paragraf yang diberi gaya.</p>
    `;
  }
}

Stylesheet Eksternal:

Anda juga dapat memuat stylesheet eksternal ke dalam Shadow DOM:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });

    const linkElem = document.createElement('link');
    linkElem.setAttribute('rel', 'stylesheet');
    linkElem.setAttribute('href', 'my-component.css');

    this.shadow.appendChild(linkElem);
    this.shadow.innerHTML += '<p>Ini adalah paragraf yang diberi gaya.</p>';
  }
}

Kesimpulan

Menguasai siklus hidup web component sangat penting untuk membangun komponen yang kuat dan dapat digunakan kembali untuk aplikasi web modern. Dengan memahami berbagai metode siklus hidup dan menggunakan praktik terbaik, Anda dapat membuat komponen yang mudah dipelihara, berkinerja tinggi, dan terintegrasi secara mulus dengan bagian lain dari aplikasi Anda. Panduan ini memberikan gambaran komprehensif tentang siklus hidup web component, termasuk penjelasan mendetail, contoh praktis, dan teknik tingkat lanjut. Manfaatkan kekuatan web component dan bangun aplikasi web yang modular, mudah dipelihara, dan dapat diskalakan.

Pembelajaran Lebih Lanjut:

MDN Web Docs: Dokumentasi ekstensif tentang web component dan custom element.
WebComponents.org: Sumber daya yang didorong oleh komunitas untuk pengembang web component.
LitElement: Kelas dasar sederhana untuk membuat web component yang cepat dan ringan.