Extension du HTML en créant des balises personnalisées

Dans ce tutoriel, je vais vous montrer à quel point il est facile d'étendre la langue HTML avec des balises personnalisées. Les balises personnalisées peuvent être utilisées pour implémenter divers comportements, ils sont donc un moyen très pratique d'écrire moins de code et de garder vos documents HTML plus simples.

pour aller plus loin avec des balises personnalisées, consultez mon article sur la création de balises personnalisées encapsulées avec le domaine d'ombre.

& lt; codingdude-gravatar & gt;

. Cette balise personnalisée affichera l'image Gravatar pour une certaine adresse e-mail. 

la fenêtre.CustomingElements.define ()

.

Le tout premier argument dans & lt; codingDudegravatar & gt;

sont

invalide . Cela permet à l'analyseur devrait être en mesure de différencier un élément régulier d'une balise personnalisée.  Les noms de balises d'élément personnalisés doivent toujours avoir un tableau de bord (-). Étape 2: Choisissez le bon prototype

htmlelement

. Le morceau de code ci-dessus est équivalent à ce qui suit:

Si vous souhaitez créer un élément personnalisé, qui étend un autre élément HTML, l'élément natif doit être étendu dans Domexception

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

.

Les balises d'élément personnalisé ne peuvent pas être auto-fermées.

4. Instanciation de l'élément personnalisé

Toutes les règles standard des éléments HTML s'appliquent aux éléments personnalisés. Tout comme les éléments standard, vous pouvez créer un élément personnalisé dans le DOM à l'aide de JavaScript, ou le déclarer dans HTML.

Déclarant des éléments personnalisés dans HTML:

Création d'un élément personnalisé dans le DOM à l'aide de JavaScript:

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

Création d'un type d'éléments de type extension dans HTML:

var codingdudeGravatar = document.createElement('codingdude-gravatar');<br>codingdudeGravatar.addEventListener('click',function(e){});<br>

Création d'un type d'éléments d'extension dans HTML: Dans DOM à l'aide de JavaScript:

<button is="codingdude-gravatar"><br>

5. L'ajout de balisage à la balise personnalisée

var codingdudeGravatar = document.createElement('button', 'codingdude-gravatar');<br>

L'ajout de balisage est assez simple dans une balise personnalisée. Pour commencer, vous devez créer une classe qui étend un élément HTML parent. Dans notre cas, nous allons étendre htmlelement

, nous utiliserons le texte intérieur

de la balise personnalisée. N'oubliez pas d'appeler cela

à l'intérieur du constructeur pointe vers l'élément personnalisé qui est créé. Voici un aperçu simple de l'apparence de notre composant.

6. Méthodes de cycle de vie

class CodingDudeGravatar extends HTMLElement {<br>  constructor() {<br>    super()<br>    this.addEventListener('click', e => {<br>        alert('You Clicked Me!')<br>    });<br>    this.innerText="Hello There!"<br>  }<br>}<br>window.customElements.define('codingdude-gravatar', CodingDudeGravatar);<br>

Avant de commencer à ajouter un balisage à la balise personnalisée, vous devez être conscient des méthodes de cycle de vie associées aux balises personnalisées. Il y a quatre rappels de cycle de vie.

Nous avons déjà vu comment utiliser le ConnectedCallback

.

class CodingDudeGravatar extends HTMLElement {<br>    constructor() {<br>    super(); // always call super() first in the constructor.<br>    ...<br>    }<br>    connectedCallback() {<br>    ...<br>    }<br>    disconnectedCallback() {<br>    ...<br>    }<br>    attributeChangedCallback(attrName, oldVal, newVal) {<br>    ...<br>    }<br>}<br>

ConnectedCallback peut être utilisé pour vérifier l'attribut e-mail dans notre balise personnalisée. Dès que l'élément est ajouté au document, ce chèque aura lieu. Nous utiliserions une balise personnalisée

que l'attribut Email

est défini dans la balise personnalisée, l'écran serait le suivant:

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

AttributeChangedCallback Pour tous les attributs énumérés dans le licenciement AttributeChangedCallback . Dans notre cas, nous voudrions que le El.SetAttribute ('Email', 'NewEmail') sur l'élément personnalisé, le navigateur déclenchera DisconnectedCallback

Dernier dans notre liste de méthodes de cycle de vie serait la méthode El.Remove () . élément, par ex. Htmlelement

, ces propriétés seront présentes dans l'élément personnalisé par défaut. Cependant, le comportement de ces propriétés peut être modifié. La plupart du temps, les Getters et les Setters dans les classes JavaScript sont utilisés pour contrôler les propriétés. 

Démo

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

Tout ce qui est discuté dans ce post peut être expérimenté dans la démo suivante.

Voir les balises personnalisées du stylo par DDEV (@divyaddev) sur Codepen.

HOORAY! Nous sommes arrivés à la fin de notre article sur la façon de créer des éléments personnalisés. Maintenant, vous devriez pouvoir créer un élément personnalisé et l'utiliser dans votre balisage HTML. Essayez-le! Vous serez étonné de voir combien peut être accompli.

Ce n'est que le début du fonctionnement des éléments personnalisés. Il y a tellement plus à explorer et à apprendre dans ce domaine. Continuez à regarder cet espace pour plus de messages sur les éléments personnalisés et leurs concepts avancés.

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!