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 schaduwdome .
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" />
