Memperluas Elemen Bawaan
Sesuaikan elemen yang sudah ada dengan atribut is.
Memperluas Elemen Bawaan adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Dua Jenis Elemen Khusus
Spesifikasi mendefinisikan elemen khusus mandiri (yang memperluas HTMLElement, digunakan sebagai <my-card>) dan elemen bawaan yang dikustomisasi (yang memperluas kelas bawaan tertentu, digunakan sebagai <button is="my-button">). Elemen bawaan yang dikustomisasi mewarisi semantik bawaan secara otomatis.
Mengapa Memperluas Elemen Bawaan?
Elemen mandiri <my-button> tidak mendapatkan perilaku bawaan apa pun dari <button>—tidak ada aktivasi dengan Enter/Spasi, tidak berpartisipasi dalam formulir, dan tidak memiliki role="button" untuk teknologi bantu. Tombol yang dikustomisasi (is="my-button") mewarisi semua perilaku tersebut secara otomatis.
Memperluas Kelas
Perluas kelas HTML tertentu, bukan HTMLElement: class MyButton extends HTMLButtonElement {}. Elemen tersebut mempertahankan semua perilaku bawaan—pengiriman formulir, pengelolaan fokus, dan status nonaktif—lalu Anda dapat menambahkan penyempurnaan di atasnya.
class MyButton extends HTMLButtonElement {
connectedCallback() {
this.style.fontWeight = "bold";
}
}Mendaftarkan dengan Opsi extends
customElements.define("my-button", MyButton, { extends: "button" }). Argumen ketiga memberi tahu registri tag bawaan mana yang diperluas oleh elemen tersebut. Tanpa argumen ini, pendaftaran akan menghasilkan kesalahan.
Atribut is
Gunakan elemen bawaan yang dikustomisasi dengan atribut is pada tag yang sudah ada: <button is="my-button">Click</button>. Menulis <my-button> sebagai gantinya akan membuat elemen mandiri dan menghilangkan perilaku bawaan.
Safari Tidak Mendukungnya
Safari menolak menerapkan elemen bawaan yang dikustomisasi dengan alasan kekhawatiran aksesibilitas. Elemen tersebut berfungsi di Chrome, Edge, dan Firefox; di Safari, atribut is diabaikan dan elemen berperilaku sebagai <button> biasa. Gunakan lapisan kompatibilitas resmi jika dukungan Safari diperlukan.
Pilihan Lapisan Kompatibilitas
Lapisan kompatibilitas @ungap/custom-elements memulihkan dukungan elemen bawaan yang dikustomisasi di Safari. Ukurannya kecil dan pemeliharaannya baik; sertakan lapisan ini jika tim Anda memerlukan dukungan lintas peramban tanpa meninggalkan pola atribut is.
Alternatif Mandiri
Jika dukungan Safari tanpa lapisan kompatibilitas penting, buat elemen mandiri dan tiru perilaku yang diperlukan secara manual: tambahkan role="button", tabindex="0", penangan papan ketik untuk Enter/Spasi, dan keterkaitan formulir melalui antarmuka pemrograman ElementInternals.
Antarmuka Keterkaitan Formulir
Elemen mandiri dapat berpartisipasi dalam pengiriman formulir dengan menetapkan static formAssociated = true dan menggunakan this.attachInternals(). Objek ElementInternals yang dikembalikan menyediakan setFormValue dan setValidity untuk integrasi formulir lengkap.
Kapan Memilih Masing-Masing
Pilih elemen bawaan yang dikustomisasi untuk komponen yang sebagian besar berperilaku seperti elemen bawaan (tombol yang dipercantik, masukan cerdas) dan platform Anda mendukung Chrome/Firefox atau Anda dapat menerima lapisan kompatibilitas. Pilih elemen mandiri untuk komponen yang sepenuhnya baru (kartu, dialog) tanpa padanan bawaan.
Kesalahan: Tombol Mandiri
Kesalahan komponen web yang paling umum adalah membuat <my-button> sebagai elemen mandiri. Elemen tersebut tidak akan mengirim formulir, tidak akan merespons Enter/Spasi, dan tidak akan diumumkan sebagai tombol. Perluas HTMLButtonElement atau tiru setiap perilaku tombol nyata dengan cermat.
Pemeriksaan Pengetahuan
Apa keuntungan praktis memperluas HTMLButtonElement (elemen bawaan yang dikustomisasi) dibandingkan memperluas HTMLElement (elemen mandiri) untuk komponen mirip tombol?
Ringkasan
Elemen bawaan yang dikustomisasi memperluas kelas HTML tertentu (HTMLButtonElement, HTMLInputElement) dan digunakan melalui atribut is, serta mewarisi semua perilaku asli. Daftarkan dengan opsi { extends: "button" }. Safari tidak mendukungnya secara bawaan—gunakan lapisan kompatibilitas atau elemen mandiri dengan peniruan perilaku secara manual jika dukungan lintas peramban penuh diperlukan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Memperluas Elemen Bawaan” gratis?
Ya — teks lengkap “Memperluas Elemen Bawaan” 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 “Memperluas Elemen Bawaan”?
Sesuaikan elemen yang sudah ada dengan atribut is. 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 4 dari 4.
Berapa lama pelajaran “Memperluas Elemen Bawaan” 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