Élément HTML personnalisé

L'article suivant fournit un aperçu de l'élément HTML personnalisé. En HTML, nous avons de nombreuses fonctionnalités pour les composants Web ; certains ont la capacité standard de créer des éléments HTML définis par l'utilisateur ou personnalisés. Il encapsule les pages Web pour plus de fonctionnalités dans le langage HTML. Cela prend beaucoup de temps avec un ensemble imbriqué d'éléments de lot qui peuvent être combinés avec des fonctionnalités de page Web plus personnalisées. Certains navigateurs Web prennent en charge des éléments personnalisés tels que les navigateurs Mozilla, Firefox, Google Chrome et Microsoft Edge ; ils sont pris en charge pour les éléments personnalisés HTML, Safari et Opera ; ces navigateurs ne sont pas compatibles avec les éléments personnalisés html ; il ne prend en charge que les éléments autonomes définis par l'utilisateur.

Syntaxe :

Nous utiliserons javascript pour définir le nouvel élément html comme les éléments personnalisés car il s'agit d'un élément globalisé pour introduire la nouvelle balise en html. La syntaxe sera donc différente lorsque nous utiliserons les éléments de notre page Web.

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

Le code ci-dessus est un exemple de code basé sur Java ; il s'agit du schéma général de création des éléments personnalisés, et les modifications seront affectées par la page Web.

Où utiliser l'élément HTML personnalisé ?

Généralement, les éléments personnalisés HTML contiennent deux types d'éléments personnalisés autonomes et d'éléments intégrés personnalisés. Chaque fois que nous créons les éléments personnalisés en HTML, ils décrivent la classe et ses méthodes, attributs et propriétés ; certains événements sont également appelés ainsi. Une fois les éléments personnalisés créés et définis de manière intégrée en tant qu'éléments HTML, certains éléments comme ,, etc. Nous pouvons ensuite utiliser nos éléments personnalisés dans le langage HTML.

Les éléments personnalisés autonomes contiennent tous les nouveaux éléments avec les éléments définis par l'utilisateur s'étendant avec la classe HtmlElement ; il viendra avec les règles standard Java. De plus, les éléments intégrés personnalisés créeront des éléments intégrés pour créer un élément personnalisé dans des éléments personnalisés autonomes ; nous indiquerons aux navigateurs comment ils l'affichent chaque fois que l'élément est ajouté ou supprimé des pages Web.

Les éléments personnalisés autonomes réalisent les scénarios ci-dessus en utilisant des classes avec des méthodes spéciales. Par exemple, certaines méthodes sont « connectedCallback() », cette méthode sera utilisée pour les appels du navigateur chaque fois que l'élément est ajouté aux documents. En outre, il peut être appelé plusieurs fois si l'élément est ajouté ou supprimé à plusieurs reprises dans les documents HTML. connectedCallback() », cette méthode appellera le navigateur chaque fois que l'élément est supprimé des documents ; il peut également être appelé plusieurs fois, l'élément doit être ajouté ou supprimé à plusieurs reprises dans les documents HTML.

observedAttributes() est l'une des méthodes permettant de renvoyer des tableaux de noms d'attributs pour surveiller les changements reflétés. La méthode attributsChangedCallback(name,oldvalue,newvalue) appelle lorsque l'un des attributs sera répertorié et doit être modifié, et " AdoptedCallback() » est appelé chaque fois que l’élément est déplacé vers un nouvel élément dans les documents HTML. Supposons maintenant que nous utilisions n’importe quel élément HTML. Dans ce cas, leurs balises, par exemple , nous allons créer l'instance de la balise La balise a MyElement en utilisant javascript, nous avons créé l'instance, en utilisant cette instance, nous appellerons les méthodes requises en utilisant les méthodes mentionnées ci-dessus, nous utiliserons leurs fonctionnalités dans les pages Web en utilisant javascript.

Supposons que nous utilisions le calcul de la date et de l'heure en HTML en utilisant des balises par défaut telles que time> est l'élément tag pour le temps. Pourtant, il n’a pas automatiquement de format d’heure à cette heure ; nous utiliserons la méthode commeconnectedCallback(); cette méthode utilisera les navigateurs en l'appelant pour options, et l'élément est également ajouté à la page, ou l'analyseur HTML aidera à le détecter. Il utilise les options intégrées pour Intl.DateTimeFormat dans dateFormatter qui prendra en charge l'ensemble des navigateurs, ce qui permet de bien s'afficher dans le format de l'heure. Nous déclarons également les nouveaux éléments html dans customElements.define (nom de la balise, nom de la classe) ; ce format permet de créer les éléments personnalisés dans les scripts.

Après avoir créé les éléments personnalisés, il est également nécessaire de mettre à jour l'ensemble du format comme la mise à jour de l'heure sur notre PC, mais il sera mis à jour avant que les éléments html de la méthode customElements.define ne soient utilisés dans les scripts car ce n'est pas une erreur ; l'élément est affiché pour inconnu, tout comme nous le disons sous forme de balises HTML non standard ; après cela, il utilisera dans les sélecteurs de style CSS comme :not(:défini) après quoi la méthode customElements.define est appelée, et il mettra à niveau la nouvelle instance dans les options de format d'heure qu'il prendra en charge dans la méthodeconnectedCallback() est également appelée puis elles sont devenues : un statut défini comme les méthodes appelées customElements.get(name),customElements.whenDefined(name) les deux méthodes renvoient le nom comme arguments.

Examples of Custom Html Element

Different examples are mentioned below:

Example #1

<html>
<head>
<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>
</head>
<time-formatted datetime="2020-02-19"
year="numeric" month="long" day="numeric"
hour="numeric" minute="numeric" second="numeric"
time-zone-name="long">
</time-formatted>
</html>

Output:

Example #2

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

Output:

Example #3

<html>
<head>
<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>
</head>
</html>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!