Menakrifkan Elemen dengan customElements.define
Daftarkan kelas elemen tersuai dengan pelayar
Menakrifkan Elemen dengan customElements.define ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah Elemen Tersuai?
Elemen tersuai membolehkan anda mencipta teg HTML sendiri yang disokong oleh kelas JavaScript. Setelah ditakrifkan, <my-card> berfungsi seperti mana-mana elemen terbina dalam: ia boleh ditulis dalam HTML, dicari, digayakan, diprogramkan dan digunakan dalam rangka kerja tanpa perubahan.
Keperluan Tanda Sempang
Setiap nama elemen tersuai mesti mengandungi sekurang-kurangnya satu tanda sempang — user-avatar, app-button, my-card. Tanda sempang membezakan elemen tersuai daripada teg HTML terbina dalam semasa dan akan datang, dan diwajibkan oleh spesifikasi.
Menentukan Kelas
Elemen tersuai ialah kelas yang melanjutkan HTMLElement (atau subkelas terbina dalam). Kelas itu boleh mengisytiharkan pembina dan panggilan balik kitar hayat. Sifat dan kaedah awam pada kelas menjadi antara muka penskrip elemen tersebut.
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}Mendaftar dengan define
customElements.define("my-card", MyCard) mendaftarkan kelas di bawah nama teg tersebut. Selepas pendaftaran, setiap <my-card> yang sedia ada dan yang akan datang dalam dokumen dinaik taraf menjadi tika kelas itu.
super() adalah Wajib
Pembina mesti memanggil super() sebagai pernyataan pertamanya sebelum menyentuh this. Melangkau super() akan menghasilkan ralat "Failed to construct 'HTMLElement'". Anggap perkara ini sebagai peraturan pembina kelas JavaScript standard, kerana memang itulah sifatnya.
Jangan Baca DOM dalam Pembina
Pembina tidak boleh membaca atribut atau anak elemen — kedua-duanya mungkin belum dihuraikan semasa pembinaan. Pindahkan persediaan yang menyentuh DOM ke dalam connectedCallback, yang dicetuskan hanya selepas elemen berada dalam dokumen.
Pendaftaran Bersifat Kekal
Nama elemen hanya boleh didaftarkan sekali bagi setiap halaman. Menentukan semula nama yang sama akan menghasilkan NotSupportedError. Muat semula halaman untuk menguji perubahan semasa pembangunan; dalam produksi, daftarkan setiap komponen sekali sahaja semasa permulaan.
Polyfill
Elemen tersuai tersedia dalam setiap pelayar moden. Untuk pelayar yang sangat lama (kebanyakannya sudah tidak digunakan), polyfill webcomponents.js menyediakan sandaran. Projek baharu boleh menggunakan sokongan asli dan melangkau polyfill sepenuhnya.
Mengesan Status Definisi
customElements.get("my-card") mengembalikan kelas jika telah ditakrifkan, dan undefined jika sebaliknya. customElements.whenDefined("my-card") mengembalikan janji yang diselesaikan sebaik sahaja elemen didaftarkan — berguna untuk kod yang perlu menunggu definisi yang dimuatkan lewat.
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});Menggunakan Elemen
Setelah ditakrifkan, gunakan elemen itu sama seperti teg terbina dalam: tuliskannya dalam HTML (<my-card></my-card>), ciptakannya melalui document.createElement("my-card"), atau wujudkannya melalui new MyCard() lalu sisipkan. Ketiga-tiga laluan menghasilkan tika dinaik taraf yang sama.
Konvensyen Penamaan
Awali elemen tersuai dengan nama projek atau syarikat (cd-card, app-modal) untuk mengelakkan perlanggaran dengan pustaka lain pada halaman yang sama. Ekosistem komponen web tidak digabungkan — sesiapa sahaja pada halaman anda boleh mendaftarkan apa-apa nama, dan pendaftaran pertama akan digunakan.
Semakan Pengetahuan
Mengapakah setiap nama elemen tersuai mesti mengandungi tanda sempang?
Ringkasan
Elemen tersuai ialah kelas JavaScript yang melanjutkan HTMLElement, didaftarkan melalui customElements.define("name", Class), dengan nama yang mesti mengandungi tanda sempang. Pembina mesti memanggil super() dahulu dan tidak boleh membaca DOM; tangguhkan kerja DOM kepada connectedCallback. Elemen yang ditakrifkan berfungsi sama seperti teg terbina dalam di mana-mana sahaja.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Menakrifkan Elemen dengan customElements.define” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Menakrifkan Elemen dengan customElements.define”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menakrifkan Elemen dengan customElements.define”?
Daftarkan kelas elemen tersuai dengan pelayar Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Menakrifkan Elemen dengan customElements.define” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menakrifkan Elemen dengan customElements.define
- connectedCallback dan disconnectedCallback
- Atribut Diperhatikan dan attributeChangedCallback
- Melanjutkan Elemen Terbina Dalam