JavaScript
Elementy niestandardowe

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


Składnia

  • .prototype.createdCallback ()
  • .prototype.attachedCallback ()
  • .prototype.detachedCallback ()
  • .prototype.attributeChangedCallback (name, oldValue, newValue)
  • document.registerElement (nazwa, [opcje])

Parametry

Parametr Detale
Nazwa Nazwa nowego niestandardowego elementu.
options.extends Nazwa rodzimego elementu, który ma być rozszerzony, jeśli taki istnieje.
options.prototype Niestandardowy prototyp do użycia dla elementu niestandardowego, jeśli taki istnieje.

Uwagi

Pamiętaj, że specyfikacja elementów niestandardowych nie została jeszcze ustandaryzowana i może ulec zmianie. Dokumentacja opisuje wersję, która została obecnie dostarczona w stabilnej wersji Chrome.

Elementy niestandardowe to funkcja HTML5 umożliwiająca programistom używanie JavaScript do definiowania niestandardowych tagów HTML, które mogą być używane na ich stronach, wraz z powiązanymi stylami i zachowaniami. Są często używane z .

Rejestracja nowych elementów

Definiuje <initially-hidden> niestandardowo <initially-hidden> element niestandardowy, który ukrywa jego zawartość, dopóki nie upłynie określona liczba sekund. 

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>

Rozszerzanie elementów natywnych

Możliwe jest rozszerzanie elementów natywnych, ale ich potomkowie nie mają własnych nazw znaczników. Zamiast tego, is atrybut jest używany do określenia, które podklasy element ma zastosowania. Na przykład, oto rozszerzenie elementu <img> , który rejestruje komunikat w konsoli po załadowaniu. 

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
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow