Memperluas HTML dengan membuat tag tersuai

Dalam tutorial ini, saya akan menunjukkan kepada anda betapa mudahnya untuk memperluaskan bahasa HTML dengan tag tersuai. Tag tersuai boleh digunakan untuk melaksanakan pelbagai tingkah laku, jadi ia adalah cara yang sangat mudah untuk menulis kod kurang dan menyimpan dokumen HTML anda lebih mudah. & lt; codingdude-gravatar & gt;

. Tag tersuai ini akan memaparkan gambar Gravatar untuk alamat e -mel tertentu. 

window.customelements.define ()

.

Hujah pertama dalam & lt; codingdudegravatar & gt; Ini membolehkan parser dapat membezakan elemen biasa dari tag tersuai.  Nama tag elemen adat mesti sentiasa mempunyai dash (-).

Langkah 2: Pilih prototaip yang betul

htmlelement

. Sekeping kod di atas bersamaan dengan yang berikut:

Jika anda ingin membuat elemen tersuai, yang memanjangkan elemen HTML yang lain, elemen asli harus dilanjutkan di Domexception . Menegaskan elemen tersuai

Semua peraturan standard elemen HTML dikenakan untuk elemen tersuai. Sama seperti unsur -unsur standard, anda boleh membuat elemen tersuai di DOM menggunakan JavaScript, atau mengisytiharkannya dalam html. Elemen pelanjutan jenis dalam DOM menggunakan JavaScript:

5. Menambah markup ke tag tersuai

Menambah markup agak mudah dalam tag tersuai. Untuk memulakan, anda perlu membuat kelas yang memanjangkan elemen HTML induk. Dalam kes kami, kami akan melanjutkan HtmlElement

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

, kami akan menggunakan innertext

tag tersuai. Ingatlah untuk memanggil ini di dalam titik pembina kepada elemen tersuai yang akan dibuat. Kaedah kitaran hayat

Sebelum anda mula menambah markup ke tag tersuai, anda perlu mengetahui kaedah kitaran hayat yang berkaitan dengan tag tersuai. Terdapat empat panggilan balik kitaran hayat.

Kami telah melihat bagaimana menggunakan ConnectedCallback

. Sebaik sahaja elemen itu ditambah ke dokumen, cek ini akan berlaku. Kami akan menggunakan tag tersuai

mempunyai atribut e -mel

ditetapkan dalam tag tersuai, skrin akan menjadi seperti berikut:

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

AttributeChangedCallback untuk semua atribut yang disenaraikan dalam AttributeChangedCallback untuk dipecat. Dalam kes kami, kami akan mahu el.setAttribute ('e -mel', 'Newemail') pada elemen tersuai, penyemak imbas akan mencetuskan conconectedCallback

Untuk menyembunyikan elemen, mis. Htmlelement

, sifat -sifat ini akan hadir dalam elemen tersuai secara lalai. Walau bagaimanapun, tingkah laku sifat -sifat ini boleh diubah suai. Kebanyakan masa, getters dan setters dalam kelas JavaScript digunakan untuk mengawal sifat. 

demo

segala -galanya yang dibincangkan dalam siaran ini boleh diuji dengan demo berikut.

<codingdude-gravatar></codingdude-gravatar><br>

Kesimpulan

hooray! Kami telah sampai ke akhir jawatan kami tentang cara membuat elemen tersuai. Sekarang, anda sepatutnya dapat membuat elemen tersuai dan menggunakannya dalam markup HTML anda. Cubalah! Anda akan terkejut melihat berapa banyak yang dapat dicapai.

Ini hanya permulaan bagaimana unsur -unsur tersuai berfungsi. Terdapat banyak lagi untuk meneroka dan belajar di kawasan ini. Teruskan menonton ruang ini untuk lebih banyak jawatan mengenai elemen tersuai dan konsep lanjutan mereka.

Atas ialah kandungan terperinci Memperluas HTML dengan membuat tag tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!