Elemen Html Tersuai

Artikel berikut menyediakan garis besar untuk Elemen Html Tersuai. Dalam html, kami mempunyai banyak ciri untuk komponen web; sesetengahnya mempunyai keupayaan standard untuk mencipta elemen html yang ditentukan pengguna atau tersuai. Ia merangkum halaman web untuk lebih banyak fungsi dalam bahasa html. Ia mengambil masa yang lama dengan set bersarang elemen kelompok yang boleh digabungkan dengan lebih banyak ciri halaman web tersuai. Sesetengah pelayar web menyokong elemen tersuai seperti pelayar Mozilla, firefox, google chrome dan Microsoft Edge; ia disokong untuk elemen tersuai html, safari dan opera; pelayar ini tidak serasi dengan elemen tersuai html; ia hanya menyokong elemen takrif pengguna autonomi.

Sintaks:

Kami akan menggunakan javascript untuk mentakrifkan elemen html baharu seperti elemen tersuai kerana ia merupakan elemen global untuk memperkenalkan teg baharu dalam html. Jadi sintaks akan berbeza apabila kami menggunakan elemen halaman web kami.

Class sample extends HtmlElement
{
default constructor()
{
---some user defined codes---
}
}

Kod di atas adalah kod sampel berasaskan java; ia adalah garis besar umum untuk mencipta elemen tersuai dan perubahan akan dipengaruhi oleh halaman web.

Di mana hendak menggunakan Elemen Html Tersuai?

Secara amnya, elemen tersuai html mengandungi dua jenis Elemen Tersuai Autonomi dan elemen terbina dalam Tersuai. Setiap kali kami mencipta elemen tersuai dalam HTML, ia menerangkan kelas dan kaedah, atribut dan sifatnya; beberapa acara juga dipanggil sebagainya. Setelah elemen tersuai dicipta dan ia ditakrifkan terbina dalam sebagai elemen html, beberapa elemen seperti ,, dsb. Kemudian, kami boleh menggunakan elemen tersuai kami dalam bahasa html.

Elemen Tersuai Autonomi mengandungi semua elemen baharu dengan elemen yang ditentukan pengguna dilanjutkan dengan kelas HtmlElement; ia akan datang dengan peraturan standard java. Tambahan pula, Elemen terbina dalam Tersuai akan mencipta elemen terbina dalam untuk mencipta elemen tersuai dalam elemen tersuai autonomi; kami akan memberitahu penyemak imbas cara mereka menunjukkannya apabila elemen itu ditambah atau dialih keluar daripada halaman web.

Elemen tersuai autonomi membuat senario di atas menggunakan kelas dengan kaedah khas. Sebagai contoh, beberapa kaedah ialah "connectedCallback()" kaedah ini akan digunakan untuk panggilan penyemak imbas apabila elemen ditambahkan pada dokumen. Selain itu, ia boleh dipanggil berkali-kali jika elemen itu ditambah atau dialih keluar berulang kali dalam dokumen html. disconnectedCallback()” kaedah ini akan memanggil penyemak imbas apabila elemen dialih keluar daripada dokumen; ia juga boleh dipanggil berkali-kali elemen itu akan ditambah atau dialih keluar berulang kali dalam dokumen html.

observedAttributes() ialah salah satu kaedah untuk mengembalikan tatasusunan nama atribut untuk memantau perubahan yang dicerminkan.attributeChangedCallback(name,oldvalue,newvalue) memanggil apabila mana-mana satu daripada atribut akan disenaraikan dan akan diubah suai, dan “ adoptedCallback()” dipanggil setiap kali elemen dipindahkan ke elemen baharu dalam dokumen html. Sekarang, katakan kita menggunakan sebarang elemen html. Dalam kes itu, mereka mempunyai teg mereka, sebagai contoh, teg, kami akan mencipta contoh tag mempunyai MyElement menggunakan javascript kami telah mencipta contoh, menggunakan contoh itu, kami akan memanggil kaedah yang diperlukan menggunakan kaedah seperti yang dinyatakan di atas kami akan menggunakan fungsinya dalam halaman web menggunakan javascript.

Andaikan kami menggunakan pengiraan tarikh dan masa dalam html menggunakan beberapa teg lalai seperti, masa> ialah elemen tag untuk masa. Namun, ia tidak mempunyai sebarang format masa secara automatik pada masa itu; kami akan menggunakan kaedah seperti connectedCallback(); kaedah ini akan menggunakan penyemak imbas dengan memanggilnya untuk pilihan, dan juga elemen ditambahkan pada halaman, atau penghurai html akan membantu untuk mengesannya menggunakan pilihan terbina dalam untuk Intl.DateTimeFormat dalam dateFormatter akan menyokong keseluruhan pelayar, yang membantu untuk menunjukkan dengan baik dalam format masa. Kami juga mengisytiharkan elemen html baharu dalam customElements.define (nama teg, nama kelas); format ini membantu mencipta elemen tersuai dalam skrip.

Selepas mencipta elemen tersuai juga perlu untuk menaik taraf keseluruhan format seperti kemas kini masa pada PC kami, tetapi ia akan dikemas kini sebelum elemen html dalam kaedah customElements.define tidak digunakan dalam skrip kerana ia bukan ralat; elemen ditunjukkan untuk tidak diketahui sama seperti yang kami katakan sebagai teg html bukan standard; selepas itu, ia akan menggunakan dalam pemilih gaya css seperti :not(:defined) selepas itu kaedah customElements.define dipanggil, dan ia akan menaik taraf contoh baharu dalam pilihan Format Masa yang akan disokong dalam kaedah connectedCallback() juga dipanggil kemudian ia menjadi: status ditakrifkan seperti kaedah yang dipanggil customElements.get(name),customElements.whenDefined(name) kedua-dua kaedah mengembalikan nama sebagai argumen.

Examples of Custom Html Element

Different examples are mentioned below:

Example #1

<script>
class sample extends HTMLElement { // (1)
connectedCallback() {
let d = new Date(this.getAttribute('datetime') || Date.now());
this.innerHTML = new Intl.DateTimeFormat("default", {
month: this.getAttribute('month') || undefined,
day: this.getAttribute('day') || undefined,
year: this.getAttribute('year') || undefined,
minute: this.getAttribute('minute') || undefined,
hour: this.getAttribute('hour') || undefined,
timeZoneName: this.getAttribute('time-zone-name') || undefined,
second: this.getAttribute('second') || undefined,
}).format(d);
}
}
customElements.define("time-formatted", sample);
</script>

<time-formatted datetime="2020-02-19" year="numeric" month="long" day="numeric" hour="numeric" minute="numeric" second="numeric" time-zone-name="long">
</time-formatted>

Output:

Example #2

<script>
customElements.define('user-information', class extends HTMLElement {
connectedCallback() {
alert(this.innerHTML);
}
});
</script>


<user-information>Sivaraman</user-information>

Output:

Example #3

<script>
class Example extends HTMLButtonElement {
constructor() {
super();
this.addEventListener('click', () => alert("User!"));
}
}
customElements.define('sample-button', Example, {extends: 'button'});
</script>
<button is="sample-button">Welcome</button>
<button is="sample-button" disabled>Disabled</button>

Output:

The above three examples will discuss the custom elements in the html languages; In the first example, we already know about the time and date format output using custom tag elements; the second example shows a basic javascript function called after executing the custom elements in the html and final example will be discussed about the same javascript function while we are clicking the html custom tag elements.

Conclusion

The Web components have some processes for connecting with the technologies. It will be used to help the html for reusable purposes across the entire web.Html have the Dom components; it will be used for communicating the user-level data(including custom elements) through the web for data migration.

Atas ialah kandungan terperinci Elemen Html Tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!