Suche…
Syntax
- .prototype.createdCallback ()
- .prototype.attachedCallback ()
- .prototype.detachedCallback ()
- .prototype.attributeChangedCallback (name, oldValue, newValue)
- document.registerElement (Name, [Optionen])
Parameter
| Parameter | Einzelheiten |
|---|---|
| Name | Der Name des neuen benutzerdefinierten Elements. |
| options.extends | Der Name des nativen Elements, das erweitert wird, falls vorhanden. |
| Optionen.Prototyp | Der für das benutzerdefinierte Element zu verwendende benutzerdefinierte Prototyp (falls vorhanden). |
Bemerkungen
Beachten Sie, dass die Spezifikation für benutzerdefinierte Elemente noch nicht standardisiert wurde und Änderungen unterliegen kann. In der Dokumentation wird die Version beschrieben, die zu diesem Zeitpunkt in Chrome stabil geliefert wurde.
Benutzerdefinierte Elemente ist eine HTML5-Funktion, die es Entwicklern ermöglicht, JavaScript zu verwenden, um benutzerdefinierte HTML-Tags zu definieren, die auf ihren Seiten verwendet werden können, mit zugeordneten Stilen und Verhalten. Sie werden oft mit Schattendom verwendet .
Neue Elemente registrieren
Definiert ein benutzerdefiniertes <initially-hidden> Element, das den Inhalt bis zu einer bestimmten Anzahl von Sekunden verbirgt.
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>
Native Elemente erweitern
Es ist möglich, native Elemente zu erweitern, aber ihre Nachkommen haben keine eigenen Tagnamen. Stattdessen das is wird Attribut verwendet , um festzulegen , welche Unterklasse ein Element soll verwenden. Hier ist zum Beispiel eine Erweiterung des <img> -Elements, die eine Nachricht beim Laden an der Konsole protokolliert.
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" />