このページは Cloud Translation API によって翻訳されました。

カスタム要素を使用する

Boris Smus

はじめに

ウェブには表現が非常に欠けています。どういうことかを理解するには、Gmail のような「最新」のウェブアプリを覗いてみましょう。

<div> スープはモダンな雰囲気ではありません。それでも、Google はこのようにしてウェブアプリを構築しています。悲しい。当社のプラットフォームにもっと求めるべきではないでしょうか？

性的なマークアップ。やってみよう

HTML はドキュメントを構造化するための優れたツールですが、その語彙は、HTML 標準で定義されている要素に限定されています。

Gmail のマークアップが厄介でなかったらどうなるでしょうか。もしそれが美しいものだったら、

<hangout-module>
    <hangout-chat from="Paul, Addy">
    <hangout-discussion>
        <hangout-message from="Paul" profile="profile.png"
            profile="118075919496626375791" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.
        <p>Heard of it?
        </hangout-message>
    </hangout-discussion>
    </hangout-chat>
    <hangout-chat>...</hangout-chat>
</hangout-module>

さわやかな気分です。このアプリも大いに意味があります。有益で、理解しやすい、そして何よりもメンテナンス可能です。宣言型バックボーンを調べるだけでその処理が正確に理解できるでしょう

ご利用にあたって

カスタム要素を使用すると、新しいタイプの HTML 要素を定義できます。この仕様は、Web Components に含まれるいくつかの新しい API プリミティブの一つですが、おそらく最も重要な点です。カスタム要素によって機能が解放されない限り、ウェブコンポーネントは存在しません。

新しい HTML/DOM 要素を定義する
他の要素から拡張する要素を作成する
カスタム機能を 1 つのタグに論理的にバンドルする
既存の DOM 要素の API を拡張する

新しい要素の登録

カスタム要素は document.registerElement() を使用して作成します。

var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

document.registerElement() の最初の引数は、要素のタグ名です。名前にはダッシュ（-）を含める必要があります。たとえば、<x-tags>、<my-element>、<my-awesome-app> はすべて有効な名前ですが、<tabs> や <foo_bar> は無効です。この制限により、パーサーはカスタム要素と通常の要素を区別できるようになりますが、新しいタグが HTML に追加されたときの上位互換性も確保されます。

2 番目の引数は、要素の prototype を記述するオブジェクトです（省略可）。ここで、カスタム機能（公開プロパティやメソッドなど）を要素に追加します。詳しくは後ほど説明します。

デフォルトでは、カスタム要素は HTMLElement を継承します。したがって、前の例は次のものと同じです。

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

document.registerElement('x-foo') を呼び出すと、ブラウザに新しい要素について学習させ、<x-foo> のインスタンスの作成に使用できるコンストラクタを返します。コンストラクタを使用しない場合は、要素をインスタンス化する他の方法を使用することもできます。

注: コンストラクタがグローバルの window オブジェクトになるのが望ましくない場合は、名前空間（var myapp = {}; myapp.XFoo = document.registerElement('x-foo');）に配置するか、床にドロップします。

要素の拡張

カスタム要素を使用すると、既存の（ネイティブ）HTML 要素や他のカスタム要素を拡張できます。要素を拡張するには、継承元の要素の名前と prototype を registerElement() に渡す必要があります。

ネイティブ要素を拡張する

標準の Joe <button> に不満があるとします。その機能を強化して「メガボタン」にしたいと考えています。<button> 要素を拡張するには、HTMLButtonElement の prototype と、要素の名前 extends を継承する新しい要素を作成します。この場合、"button":

var MegaButton = document.registerElement('mega-button', {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: 'button'
});

注: 要素 B を拡張する要素 A を作成するには、要素 A が要素 B の prototype を継承する必要があります。
ネイティブ要素を継承するカスタム要素は、型拡張カスタム要素と呼ばれます。「要素 X は Y である」と言うため、特別バージョンの HTMLElement を継承します。

例:

<button is="mega-button">

カスタム要素の拡張

<x-foo> カスタム要素を拡張する <x-foo-extended> 要素を作成するには、そのプロトタイプを継承し、継承元のタグを指定するだけです。

var XFooProto = Object.create(HTMLElement.prototype); ... var XFooExtended = document.registerElement('x-foo-extended', { prototype: XFooProto, extends: 'x-foo' });

要素のプロトタイプの作成について詳しくは、後述の JS のプロパティとメソッドの追加をご覧ください。

要素のアップグレード方法

HTML パーサーが標準以外のタグに対応しないのはなぜか、考えたことはありませんか？たとえば、ページで <randomtag> を宣言すればまったく問題ありません。HTML 仕様によれば、次のようになります。

注: この仕様で定義されていない HTML 要素には、HTMLUnknownElement インターフェースを使用する必要があります。

<randomtag> さん、ごめんなさい！非標準であり、HTMLUnknownElement から継承しています。

これは、カスタム要素についても同様です。有効なカスタム要素名を持つ要素は HTMLElement を継承します。これを確認するには、コンソール Ctrl + Shift + J（Mac の場合は Cmd + Opt + J）を起動し、次のコード行を貼り付けると true が返されます。

// "tabs" is not a valid custom element name document.createElement('tabs').__proto__ === HTMLUnknownElement.prototype // "x-tabs" is a valid custom element name document.createElement('x-tabs').__proto__ == HTMLElement.prototype

注: document.registerElement() に対応していないブラウザでは、<x-tabs> は依然として HTMLUnknownElement です。

未解決の要素

カスタム要素は document.registerElement() を使用してスクリプトで登録されるため、ブラウザで定義を登録する前に宣言または作成できます。たとえば、<x-tabs> をページで宣言しても、後で document.registerElement('x-tabs') を呼び出すことになります。

要素が定義にアップグレードされる前は、未解決要素と呼ばれます。有効なカスタム要素名が指定されているが、登録されていない HTML 要素です。

次の表でわかりやすく説明します。

名前継承元例

未解決の要素 HTMLElement <x-tabs>、<my-element>

不明な要素 HTMLUnknownElement <tabs>、<foo_bar>

注: 未解決の要素はあいまいな要素と考えてください。ブラウザのアップグレードを後回しにできます。ブラウザはこう言っています。「新しい要素に求める品質は、すべて揃っています。定義を聞いたら、アップグレードすると約束します。」

要素のインスタンス化

要素を作成する一般的な手法は、カスタム要素にも適用されます。他の標準要素と同様に、HTML で宣言するか、JavaScript を使用して DOM で作成できます。

カスタムタグのインスタンス化

宣言します。

<x-foo></x-foo>

JS で DOM を作成します。

var xFoo = document.createElement('x-foo'); xFoo.addEventListener('click', function(e) { alert('Thanks!'); });

new 演算子を使用します。

var xFoo = new XFoo(); document.body.appendChild(xFoo);

タイプ拡張要素のインスタンス化

タイプ拡張スタイルのカスタム要素をインスタンス化する方法は、カスタムタグと非常に類似しています。

宣言します。

 <button is="mega-button">

JS で DOM を作成します。

var megaButton = document.createElement('button', 'mega-button'); // megaButton instanceof MegaButton === true

ご覧のとおり、2 番目のパラメータとして is="" 属性を受け取る document.createElement() のオーバーロードバージョンがあります。

new 演算子を使用します。

var megaButton = new MegaButton(); document.body.appendChild(megaButton);

ここまで、document.registerElement() を使用して新しいタグをブラウザに伝える方法を学びましたが、それだけでは十分ではありません。プロパティとメソッドを追加しましょう。

JS のプロパティとメソッドを追加する

カスタム要素の優れた点は、要素の定義でプロパティとメソッドを定義することで、カスタマイズされた機能を要素にバンドルできることです。これは、要素用の公開 API を作成する 1 つの方法と考えてください。

以下に完全な例を示します。

var XFooProto = Object.create(HTMLElement.prototype); // 1. Give x-foo a foo() method. XFooProto.foo = function() { alert('foo() called'); }; // 2. Define a property read-only "bar". Object.defineProperty(XFooProto, "bar", {value: 5}); // 3. Register x-foo's definition. var XFoo = document.registerElement('x-foo', {prototype: XFooProto}); // 4. Instantiate an x-foo. var xfoo = document.createElement('x-foo'); // 5. Add it to the page. document.body.appendChild(xfoo);

もちろん、prototype の構築には 1,000 通りの方法があります。このようなプロトタイプの作成がお好きでない方のために、同じものを簡略化して示します。

var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype, { bar: { get: function () { return 5; } }, foo: { value: function () { alert('foo() called'); } } }) });

最初の形式では、ES5 Object.defineProperty を使用できます。2 つ目の方法では、get/set を使用できます。

ライフサイクルコールバックメソッド

要素では、その存在の興味深い時間帯を活用するための特別なメソッドを定義できます。これらのメソッドには、ライフサイクルコールバックという適切な名前が付けられています。それぞれに特定の名前と目的があります。

コールバック名呼び出されるタイミング

createdCallback 要素のインスタンスが作成されます。

attachedCallback インスタンスがドキュメントに挿入されました

detachedCallback インスタンスがドキュメントから削除されました

attributeChangedCallback(attrName, oldVal, newVal) 属性が追加、削除、または更新された

例: <x-foo> で createdCallback() と attachedCallback() を定義します。

var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() {...}; proto.attachedCallback = function() {...}; var XFoo = document.registerElement('x-foo', {prototype: proto});

ライフサイクルコールバックはすべて省略可能ですが、必要な場合は定義してください。たとえば、要素が非常に複雑で、createdCallback() で IndexedDB への接続を開いているとします。DOM から削除する前に、detachedCallback() で必要なクリーンアップ作業を行います。注: ユーザーがタブを閉じた場合などは、この値に依存しないでください。ただし、最適化フックの可能性があるものと考えてください。

別のユースケースのライフサイクルコールバックは、要素にデフォルトのイベントリスナーを設定することです。

proto.createdCallback = function() { this.addEventListener('click', function(e) { alert('Thanks!'); }); };

注: 表示がぎこちなくなると、ユーザーはその要素を使用しません。ライフサイクルコールバックを使用すると、優れたマナーモードになります。

マークアップの追加

JavaScript API を指定して <x-foo> を作成しましたが、空白です。レンダリングする HTML を与えようか？

ここでは、ライフサイクルコールバックが便利です。特に、createdCallback() を使用すると、要素にデフォルトの HTML を提供できます。

var XFooProto = Object.create(HTMLElement.prototype); XFooProto.createdCallback = function() { this.innerHTML = "**I'm an x-foo-with-markup!**"; }; var XFoo = document.registerElement('x-foo-with-markup', {prototype: XFooProto});

このタグをインスタンス化して DevTools で検査すると（右クリックして [要素を検証] を選択）、次のように表示されます。

▾<x-foo-with-markup> **I'm an x-foo-with-markup!** </x-foo-with-markup>

Shadow DOM の内部をカプセル化する

Shadow DOM は、それ自体がコンテンツをカプセル化するための強力なツールです。カスタム要素と組み合わせて使用すると、魔法のような効果が期待できます。

Shadow DOM は、次のカスタム要素を提供します。

直感を隠して、残虐な実装の詳細からユーザーを守る手段。

スタイルのカプセル化: 自由自在。

Shadow DOM からの要素の作成は、基本的なマークアップをレンダリングする要素の作成に似ています。違いは createdCallback() です。

var XFooProto = Object.create(HTMLElement.prototype); XFooProto.createdCallback = function() { // 1. Attach a shadow root on the element. var shadow = this.createShadowRoot(); // 2. Fill it with markup goodness. shadow.innerHTML = "**I'm in the element's Shadow DOM!**"; }; var XFoo = document.registerElement('x-foo-shadowdom', {prototype: XFooProto});

要素の .innerHTML を設定する代わりに、<x-foo-shadowdom> の Shadow Root を作成し、それにマークアップを埋めました。DevTools で [Shadow DOM を表示] 設定を有効にすると、展開可能な #shadow-root が表示されます。

▾<x-foo-shadowdom> ▾#shadow-root **I'm in the element's Shadow DOM!** </x-foo-shadowdom>

これがシャドウルート！

テンプレートからの要素の作成

HTML テンプレートも、カスタム要素に適した新しい API プリミティブです。

例: <template> と Shadow DOM から作成された要素の登録:

<template id="sdtemplate"> <style> p { color: orange; } </style> <p>I'm in Shadow DOM. My markup was stamped from a <template>. </template> <script> var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector('#sdtemplate'); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } } }); document.registerElement('x-foo-from-template', {prototype: proto}); </script> <template id="sdtemplate"> <style>:host p { color: orange; }</style> <p>I'm in Shadow DOM. My markup was stamped from a <template>. </template> <div class="demoarea"> <x-foo-from-template></x-foo-from-template> </div>

この数行のコードは、大きな効果を発揮します。何が起こっているかを理解しましょう。

HTML に新しい要素を登録しました: <x-foo-from-template>

要素の DOM が <template> から作成されている

要素の恐ろしいディテールは、Shadow DOM を使用して隠されます。

Shadow DOM は、要素のスタイルをカプセル化します（たとえば、p {color: orange;} によってページ全体がオレンジ色になるわけではありません）。

その調子です。

カスタム要素のスタイル設定

他の HTML タグと同様に、カスタムタグのユーザーはセレクタを使用してスタイルを設定できます。

<style> app-panel { display: flex; } [is="x-item"] { transition: opacity 400ms ease-in-out; opacity: 0.3; flex: 1; text-align: center; border-radius: 50%; } [is="x-item"]:hover { opacity: 1.0; background: rgb(255, 0, 255); color: white; } app-panel > [is="x-item"] { padding: 5px; list-style: none; margin: 0 7px; } </style> <app-panel> <li is="x-item">Do</li> <li is="x-item">Re</li> <li is="x-item">Mi</li> </app-panel>

Shadow DOM を使用する要素のスタイル設定

Shadow DOM を組み合わせると、ラビットホールはさらに深くなります。Shadow DOM を使用するカスタム要素には、その大きな利点が引き継がれます。

Shadow DOM は、要素にスタイルのカプセル化を組み込みます。Shadow Root で定義されたスタイルは、ホストの外部には漏洩せず、ページから漏洩しません。カスタム要素の場合、要素自体がホストです。スタイルのカプセル化のプロパティを使用して、カスタム要素で独自のデフォルトスタイルを定義することもできます。

Shadow DOM のスタイル設定は大きなトピックです。詳しくは、以下の記事もご参照ください。

Polymer のドキュメントの「A Guide to Styling Elements」

「Shadow DOM 201: CSS とスタイル設定」。

:unresolved を使用した FOUC 防止

FOUC を軽減するために、カスタム要素は新しい CSS 疑似クラス :unresolved を規定します。これを使用して、ブラウザが createdCallback() を呼び出すまで未解決の要素をターゲットにします（ライフサイクルメソッドをご覧ください）。この状態になると、その要素は未解決の要素ではなくなります。アップグレードプロセスが完了し、要素がその定義に変換されました。

注: CSS :unresolved は Chrome 29 でネイティブにサポートされています。

例: 「x-foo」タグの登録時にフェードインする:

<style> x-foo { opacity: 1; transition: opacity 300ms; } x-foo:unresolved { opacity: 0; } </style>

:unresolved は未解決の要素にのみ適用され、HTMLUnknownElement を継承する要素には適用されません（要素のアップグレード方法をご覧ください）。

<style> /* apply a dashed border to all unresolved elements */ :unresolved { border: 1px dashed red; display: inline-block; } /* x-panel's that are unresolved are red */ x-panel:unresolved { color: red; } /* once the definition of x-panel is registered, it becomes green */ x-panel { color: green; display: block; padding: 5px; display: block; } </style> <panel> I'm black because :unresolved doesn't apply to "panel". It's not a valid custom element name. </panel> <x-panel>I'm red because I match x-panel:unresolved.</x-panel>

履歴とブラウザのサポート

機能検出

特徴検出では、document.registerElement() が存在するかどうかを確認する必要があります。

function supportsCustomElements() { return 'registerElement' in document; } if (supportsCustomElements()) { // Good to go! } else { // Use other libraries to create components. }

ブラウザサポート

document.registerElement() は、Chrome 27 と Firefox 23 で初めて旗の形を取り始めました。しかし、それ以降、仕様はかなり進化しています。Chrome 31 では最新の仕様を初めてサポートします

注: カスタム要素は Chrome 31 の about:flags の [Experimental Web Platform の機能] で有効にできます。

ブラウザがサポートされるまでは、Google の Polymer と Mozilla の X-Tag で使用されるpolyfillを利用できます。

HTMLElementElement はどうなったのですか？

標準化の取り組みを行っている場合は、かつては <element> があったことでしょう。それはハチの膝でした。これを使用して、新しい要素を宣言的に登録できます。

<element name="my-element"> ... </element>

残念ながら、アップグレードプロセス、特殊なケース、ハルマゲドンのようなシナリオにはタイミングの問題が多すぎるため、すべてを解決できません。<element> を陳列する必要がありました。2013 年 8 月、Dimitri Glazkov 氏は public-webapps に投稿し、少なくとも当面は削除を発表しました。

注意すべき点として、Polymer は <polymer-element> による要素登録の宣言型を実装しています。このアプリでは、document.registerElement('polymer-element') と、テンプレートから要素を作成するで説明した手法を使用します。

おわりに

カスタム要素を使用すると、HTML の語彙を拡張し、新しい技法を習得し、ウェブプラットフォームのワームホールを乗り越えられます。これらを Shadow DOM や <template> などの他の新しいプラットフォームプリミティブと組み合わせることで、ウェブコンポーネントの全体像が見え始めます。マークアップはセクシーなものです。

ウェブコンポーネントに関心をお持ちの場合は、Polymer をご確認ください。これだけではありません。

名前	継承元	例
未解決の要素	`HTMLElement`	`<x-tabs>`、`<my-element>`
不明な要素	`HTMLUnknownElement`	`<tabs>`、`<foo_bar>`

コールバック名	呼び出されるタイミング
createdCallback	要素のインスタンスが作成されます。
attachedCallback	インスタンスがドキュメントに挿入されました
detachedCallback	インスタンスがドキュメントから削除されました
attributeChangedCallback(attrName, oldVal, newVal)	属性が追加、削除、または更新された