カスタム要素(custom elements)は、Webコンポーネント(Web Components) と呼ばれる技術群のひとつです。JavaScript を用いて独自の要素を定義することができます。
カスタム要素のバージョンには、document.registerElement() を用いる v0 と、window.customElements() を用いる v1 がありますが、ここでは、新しい v1 について説明します。Chrome 59 や Opera 47 などでサポートされています。
カスタム要素には、新規の要素を定義する「自律カスタム要素」と、既存の要素をカスタマイズする「カスタマイズドビルトイン要素」があります。
カスタム要素名は、標準の要素名との重複を避けるために、必ずハイフン(-)を含める必要があります。
下記は、name 属性の値に応じて 「Hello, {name属性}!」と表示する新規のカスタム要素 <hello-element> を定義しています。
<script>
class HelloElement extends HTMLElement {
// コンストラクタ
// 必ず親コンストラクタ super() を呼び出すこと。
// 属性値 _name を初期化
constructor() {
super();
this._name = null;
}
// 監視する属性名のリストを返却する
static get observedAttributes() {
return ["name"];
}
// 監視する属性が設定・変更された際に呼び出される
// _name 属性を変更し、レンダリングする
attributeChangedCallback(name, oldValue, newValue) {
this._name = newValue;
this._updateRendering();
}
// 要素が挿入された際に呼び出される
connectedCallback() {
this._updateRendering();
}
// name属性のゲッター
get name() {
return this._name;
}
// name属性のセッター
set name(v) {
this.setAttribute("name", v);
}
// レンダリング
// Hello, {name属性}! と表示する
_updateRendering() {
this.textContent = 'Hello, ' + this._name + '!';
}
}
// 上記で定義したクラスを用いて、カスタム要素 <hello-element> を定義する
customElements.define("hello-element", HelloElement);
</script>
// カスタム要素を使用する
<hello-element name="Tanaka"></hello-element>
カスタム要素は新規に作成する他、既存の要素を拡張して作成することもできます。下記の例では、既存の button 要素に対して、plastic-button というカスタム効果を加えています。
<script>
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// アニメーションなどの効果を記述する
});
}
}
customElements.define("plastic-button", PlasticButton, { extends: "button" });
<script>
<button is="plastic-button">Click Me!</button>