Custom elements lifecycle

primary-button.js

class PrimaryButton extends HTMLElement {

  // Wajib diisi ketika elemen dibuat atau ditingkatkan.
  // Berguna untuk inisialisasi state, setting event listener,
  // atau membuat shadow DOM.
  constructor() {...}

  // Dipanggil setiap kali elemen dimasukkan ke dalam DOM. 
  // Berguna saat menjalankan setup kode (menarik resource atau rendering).
  connectedCallback() {...}

  // Dipanggil setiap kali elemen dihapuskan dari DOM. 
  // Berguna untuk menjalankan pembersihan kode.
  disconnectedCallback() {...}

  // Dipanggil ketika sebuah observed attribute ditambahkan, diperbaharui, dihapus atau diganti. 
  // Juga dipanggil untuk inisialisasi sebuah nilai ketika elemen dibuat oleh parser atau ditingkatkan.
  attributeChangedCallback() {...}
  
  // Ketika elemen diadopsi atau dipindahkan ke dokumen baru.
  adoptedCallback() {...}
}

// Mendaftarkan <primary-button>
customElements.define('primary-button', PrimaryButton);