Buscar..
Sintaxis
- .prototype.createdCallback ()
- .prototype.attachedCallback ()
- .prototype.detachedCallback ()
- .prototype.attributeChangedCallback (name, oldValue, newValue)
- document.registerElement (nombre, [opciones])
Parámetros
| Parámetro | Detalles |
|---|---|
| nombre | El nombre del nuevo elemento personalizado. |
| opciones.extendimientos | El nombre del elemento nativo que se extiende, si lo hay. |
| opciones.prototipo | El prototipo personalizado que se utilizará para el elemento personalizado, si lo hay. |
Observaciones
Tenga en cuenta que la especificación de elementos personalizados aún no se ha estandarizado y está sujeta a cambios. La documentación describe la versión que se ha enviado en Chrome estable en este momento.
Elementos personalizados es una característica de HTML5 que permite a los desarrolladores usar JavaScript para definir etiquetas HTML personalizadas que se pueden usar en sus páginas, con estilos y comportamientos asociados. Se utilizan a menudo con la sombra-dom .
Registro de nuevos elementos
Define un elemento personalizado <initially-hidden> que oculta su contenido hasta que haya transcurrido un número específico de segundos.
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>
Extendiendo Elementos Nativos
Es posible ampliar los elementos nativos, pero sus descendientes no pueden tener sus propios nombres de etiqueta. En cambio, el is atributo se utiliza para especificar qué subclase un elemento se supone que el uso. Por ejemplo, aquí hay una extensión del elemento <img> que registra un mensaje en la consola cuando se carga.
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" />
