JavaScript
Elementi personalizzati

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


Sintassi

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

Parametri

Parametro Dettagli
nome Il nome del nuovo elemento personalizzato.
options.extends Il nome dell'elemento nativo che viene esteso, se presente.
options.prototype Il prototipo personalizzato da utilizzare per l'elemento personalizzato, se presente.

Osservazioni

Si noti che la specifica degli elementi personalizzati non è stata ancora standardizzata ed è soggetta a modifiche. La documentazione descrive la versione che è stata spedita in Chrome stabile al momento.

Elementi personalizzati è una funzionalità HTML5 che consente agli sviluppatori di utilizzare JavaScript per definire tag HTML personalizzati che possono essere utilizzati nelle loro pagine, con stili e comportamenti associati. Sono spesso usati con .

Registrazione di nuovi elementi

Definisce un elemento personalizzato <initially-hidden> che nasconde il suo contenuto fino a quando è trascorso un numero specificato di secondi. 

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>

Estensione di elementi nativi

È possibile estendere gli elementi nativi, ma i loro discendenti non possono avere i loro nomi di tag. Al contrario, la is attributo viene utilizzato per specificare quale sottoclasse si suppone un elemento da utilizzare. Ad esempio, ecco un'estensione dell'elemento <img> che registra un messaggio alla console quando viene caricato. 

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
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow