Atribut yang Diamati dan attributeChangedCallback
Tanggapi perubahan atribut HTML pada elemen khusus.
Atribut yang Diamati dan attributeChangedCallback adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Menanggapi Perubahan Atribut
Elemen HTML mengekspos status melalui atribut. Untuk menanggapi perubahan <my-card name="A"> menjadi name="B", deklarasikan daftar atribut yang diamati dan implementasikan attributeChangedCallback pada kelas.
observedAttributes Statis
Deklarasikan atribut yang ingin Anda pantau melalui pengambil statis: static get observedAttributes() { return ["name", "open"]; }. Hanya atribut dalam daftar ini yang memicu panggilan balik—atribut lain diabaikan demi kinerja.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}Tanda Tangan Panggilan Balik
attributeChangedCallback(name, oldValue, newValue) dipanggil untuk setiap perubahan atribut yang diamati. Ketiga parameter berupa string (atau null jika atribut tidak ada). Gunakan parameter tersebut untuk memperbarui status internal dan melakukan render ulang.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}Dipanggil untuk Atribut Awal
Panggilan balik dipicu sekali untuk setiap atribut yang diamati dan sudah ada ketika elemen ditingkatkan. Artinya, render dalam attributeChangedCallback menangani render awal maupun render berikutnya tanpa jalur terpisah dalam connectedCallback.
Pencerminan Properti dan Atribut
Untuk atribut boolean, cerminkan properti ke atribut dan sebaliknya: menetapkan element.open = true harus menetapkan atribut open, dan menghapus atribut harus mengosongkan properti tersebut. Ini sesuai dengan perilaku elemen bawaan seperti <details>.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Hindari Perulangan Tanpa Akhir
Jika attributeChangedCallback menetapkan atribut yang diamatinya, Anda dapat masuk ke perulangan tanpa akhir. Selalu lindungi dengan if (oldValue === newValue) return; di awal panggilan balik dan hindari mengubah atribut yang diamati dari dalamnya.
Atribut Boolean
Menurut konvensi HTML, atribut boolean "ditetapkan" berdasarkan keberadaannya (disabled, open) dan "tidak ditetapkan" berdasarkan ketidakhadirannya. Nilainya diabaikan—disabled="false" tetap berarti dinonaktifkan. Periksa keberadaan dengan hasAttribute, jangan pernah membandingkan teksnya.
JSON dalam Atribut
Atribut berupa string. Untuk meneruskan data terstruktur, gunakan JSON.stringify dalam markah dan uraikan dalam attributeChangedCallback: <my-chart data-points='[1,2,3]'>. Untuk muatan data besar, sebaiknya teruskan data melalui penetapan properti JS.
Dibandingkan dengan MutationObserver
Anda dapat mengamati perubahan atribut dengan MutationObserver, tetapi observedAttributes + attributeChangedCallback lebih cepat (tanpa penyiapan pengamat), bersifat deklaratif (daftar nama yang diamati terlihat pada kelas), dan merupakan cara yang lazim untuk komponen web.
Kinerja: Gabungkan Render
Beberapa atribut yang berubah secara berurutan dalam waktu singkat akan memicu beberapa panggilan balik dan beberapa render. Gabungkan dengan queueMicrotask atau requestAnimationFrame agar render yang sebenarnya berjalan sekali per mikro-tugas atau bingkai, terlepas dari jumlah atribut yang berubah.
Kesalahan Umum
Lupa menambahkan atribut ke observedAttributes secara diam-diam menonaktifkan panggilan balik untuk atribut tersebut. Jika komponen Anda tidak menanggapi pemanggilan setAttribute, hal pertama yang perlu diperiksa adalah daftar observedAttributes statis.
Pemeriksaan Pengetahuan
Apa yang terjadi jika Anda secara tidak langsung memanggil attributeChangedCallback dengan menetapkan atribut yang diamati di dalam panggilan balik tersebut?
Ringkasan
Deklarasikan atribut yang akan dilacak melalui pengambil observedAttributes statis; attributeChangedCallback(name, oldValue, newValue) dipanggil untuk setiap perubahan, termasuk penguraian awal. Cerminkan properti ke atribut untuk status boolean, cegah perulangan tanpa akhir, dan gabungkan render dengan requestAnimationFrame demi kinerja.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Atribut yang Diamati dan attributeChangedCallback” gratis?
Ya — teks lengkap “Atribut yang Diamati dan attributeChangedCallback” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Atribut yang Diamati dan attributeChangedCallback”?
Tanggapi perubahan atribut HTML pada elemen khusus. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Atribut yang Diamati dan attributeChangedCallback” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mendefinisikan Elemen dengan customElements.define
- connectedCallback dan disconnectedCallback
- Atribut yang Diamati dan attributeChangedCallback
- Memperluas Elemen Bawaan