JavaScript
カスタム要素

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


構文

  • .prototype.createdCallback（）
  • .prototype.attachedCallback（）
  • .prototype.detachedCallback（）
  • .prototype.attributeChangedCallback（name、oldValue、newValue）
  • document.registerElement（name、[options]）

パラメーター

パラメータ詳細
名新しいカスタム要素の名前。
options.extends 拡張されるネイティブ要素の名前（存在する場合）。
options.prototype カスタム要素に使用するカスタムプロトタイプ（存在する場合）。

備考

カスタム要素の仕様はまだ標準化されておらず、変更される可能性があることに注意してください。このドキュメントでは、現時点でChromeの安定版に同梱されているバージョンについて説明しています。

カスタム要素は、HTML5の機能で、開発者はJavaScriptを使用して、カスタムHTMLタグを定義し、関連付けられたスタイルやビヘイビアでそのページで使用できます。彼らはしばしば使用されます。

新しい要素の登録

指定された秒数が経過するまでその内容を隠す<initially-hidden>カスタム要素を定義します。 

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>

ネイティブ要素の拡張

ネイティブ要素を拡張することは可能ですが、その子孫は独自のタグ名を持つことはできません。代わりに、 is属性は、要素が使用されるはずのサブクラスを指定するために使用されます。たとえば、メッセージがロードされたときにコンソールにメッセージを記録する<img>要素の拡張があります。 

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
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow