JavaScript
Anpassade element

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


Syntax

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

parametrar

Parameter detaljer
namn Namnet på det nya anpassade elementet.
options.extends Namnet på det ursprungliga elementet som utvidgas, om något.
options.prototype Den anpassade prototypen för eventuellt anpassad element.

Anmärkningar

Observera att specifikationerna för anpassade element ännu inte har standardiserats och kan ändras. Dokumentationen beskriver den version som har skickats i Chrome-stabil för närvarande.

Custom Elements är en HTML5-funktion som gör det möjligt för utvecklare att använda JavaScript för att definiera anpassade HTML-taggar som kan användas på deras sidor, med tillhörande stilar och beteenden. De används ofta med .

Registrera nya element

Definierar ett <initially-hidden> anpassat element som döljer dess innehåll tills ett specificerat antal sekunder har gått. 

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>

Utöka infödda element

Det är möjligt att utvidga infödda element, men deras ättlingar får inte ha sina egna tagnamn. Istället is är attribut som används för att ange vilken underklass ett element är tänkt att användas. Här är till exempel en förlängning av <img> -elementet som loggar ett meddelande till konsolen när det laddas. 

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
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow