JavaScript
Éléments personnalisés

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions
Recherche…


Syntaxe

  • .prototype.createdCallback ()
  • .prototype.attachedCallback ()
  • .prototype.detachedCallback ()
  • .prototype.attributeChangedCallback (name, oldValue, newValue)
  • document.registerElement (nom, [options])

Paramètres

Paramètre Détails
prénom Le nom du nouvel élément personnalisé.
options.extends Le nom de l'élément natif en cours d'extension, le cas échéant.
options.prototype Le prototype personnalisé à utiliser pour l'élément personnalisé, le cas échéant.

Remarques

Notez que la spécification des éléments personnalisés n'a pas encore été normalisée et est susceptible de changer. La documentation décrit la version livrée dans Chrome stable pour le moment.

Éléments personnalisés est une fonctionnalité HTML5 permettant aux développeurs d'utiliser JavaScript pour définir des balises HTML personnalisées pouvant être utilisées dans leurs pages, avec des styles et des comportements associés. Ils sont souvent utilisés avec .

Enregistrement de nouveaux éléments

Définit un élément personnalisé <initially-hidden> qui masque son contenu jusqu'à ce qu'un nombre spécifié de secondes se soit écoulé. 

const InitiallyHiddenElement = document.registerElement('initially-hidden', class extends HTMLElement {
  createdCallback() {
    this.revealTimeoutId = null;
  }

  attachedCallback() {
    const seconds = Number(this.getAttribute('for'));
    this.style.display = 'none';
    this.revealTimeoutId = setTimeout(() => {
      this.style.display = 'block';
    }, seconds * 1000);
  }

  detachedCallback() {
    if (this.revealTimeoutId) {
      clearTimeout(this.revealTimeoutId);
      this.revealTimeoutId = null;
    }
  }
});

<initially-hidden for="2">Hello</initially-hidden>
<initially-hidden for="5">World</initially-hidden>

Extension d'éléments natifs

Il est possible d'étendre les éléments natifs, mais leurs descendants ne peuvent pas avoir leurs propres noms de balises. Au lieu de cela, l' is - attribut est utilisé pour spécifier la sous - classe un élément est censé utiliser. Par exemple, voici une extension de l'élément <img> qui enregistre un message sur la console lorsqu'elle est chargée. 

const prototype = Object.create(HTMLImageElement.prototype);
prototype.createdCallback = function() {
  this.addEventListener('load', event => {
      console.log("Image loaded successfully.");
  });
};

document.registerElement('ex-image', { extends: 'img', prototype: prototype });

<img is="ex-image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" />


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow