JavaScript
Aangepaste elementen

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


Syntaxis

  • .prototype.createdCallback ()
  • .prototype.attachedCallback ()
  • .prototype.detachedCallback ()
  • .prototype.attributeChangedCallback (naam, oldValue, newValue)
  • document.registerElement (naam, [opties])

parameters

Parameter Details
naam De naam van het nieuwe aangepaste element.
options.extends De naam van het native element dat wordt uitgebreid, indien aanwezig.
options.prototype Het aangepaste prototype dat moet worden gebruikt voor het aangepaste element, indien aanwezig.

Opmerkingen

Merk op dat de Custom Elements-specificatie nog niet is gestandaardiseerd en kan worden gewijzigd. De documentatie beschrijft de versie die op dit moment stabiel in Chrome is verzonden.

Aangepaste elementen is een HTML5-functie waarmee ontwikkelaars JavaScript kunnen gebruiken om aangepaste HTML-tags te definiëren die op hun pagina's kunnen worden gebruikt, met bijbehorende stijlen en gedragingen. Ze worden vaak gebruikt met .

Nieuwe elementen registreren

Definieert een <initially-hidden> aangepast element dat de inhoud ervan verbergt totdat een bepaald aantal seconden is verstreken. 

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>

Inheemse elementen uitbreiden

Het is mogelijk om native elementen uit te breiden, maar hun nakomelingen krijgen geen eigen tagnamen. In plaats daarvan, het is wordt attribuut dat wordt gebruikt om aan te geven welke subklasse een element wordt verondersteld om gebruik te maken. Hier is bijvoorbeeld een extensie van het element <img> die een bericht bij de console logt wanneer het wordt geladen. 

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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow