JavaScript
Elementos personalizados

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions
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 .

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


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow