次に、アイコンを表示するシンプルなエレメントを作成します。

このステップでは、以下のことについて学習します:

  • Polymerを使用してCustom Elementsを作成する。
  • Shadow DOMの扱い。

Shadow DOM は、あなたが作成したエレメントによって管理されるDOMエレメントのセットです。このセクションで詳しく解説します。

Shadow DOMのコンセプトの詳細については、開発者向けドキュメントを参照してください。: Shadow DOM コンセプト

icon-toggle.htmlを編集する

icon-toggle.htmlを開きましょう。このファイルにはCustom Elementのスケルトンが含まれています。

他のHTMLファイルとは異なり、このファイルをブラウザで読み込んでも、何も表示されません。新しいエレメントを定義するだけです。 このデモではicon-toggle.htmlをインポートしているので、<icon-toggle>エレメントを使用できます。 次の手順でエレメントに機能を追加すると、その機能がデモに表示されます。

まず、既存のコードを見てみましょう:

スタートコード-HTMLのインポート

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-icon/iron-icon.html">

重要事項:

  • link rel="import"HTML importであり、HTMLファイルにリソースを含める方法です。
  • これらの記述は、Polymerライブラリとこのステップの後半で使用するiron-iconという別のCustom Elementをインポートするためのものです。

詳細: HTML Imports HTML Importsの詳細な議論については、HTML5Rocks.comの HTML Imports: #include for the web を参照してください。

次にエレメント自体を定義します:

スタートコード—ローカルDOM template

<dom-module id="icon-toggle">
  <template>
    <style>
      /* shadow DOM styles go here */
      :host {
        display: inline-block;
      }
    </style>
    <!-- shadow DOM goes here -->
    <span>Not much here yet.</span>
  </template>

重要事項:

  • <dom-module> タグは、エレメントのローカルDOM定義をラップします。 この場合のid属性は、このモジュールがicon-toggleというエレメントのローカルDOMを含むことを示しています。
  • <template>は、エレメントのローカルDOM構造とスタイリングを実際に定義している部分です。ここにCustom Elementのマークアップを追加します。
  • <template>の中の<style>は ローカルDOMにスコープされたスタイルを定義するため、他のドキュメントに影響を及ぼしません。
  • :host疑似クラスは、定義しているCustom Element(この場合は<icon-toggle>)と一致します。これは、ローカルDOMツリーを格納またはホストする要素です。

詳細: Shadow DOM. Shadow DOMでは、エレメント内にスコープ付DOMツリーを追加することができます。このスコープ付DOMツリーのローカルスタイルとマークアップはWebページの他の部分と切り離されています。Shadow DOMはWHATWGのShadow DOM仕様に基づいており、使用可能な場合はネイティブShadow DOMを使って動作します。 詳細については、Polymerライブラリ DocsのShadow DOM Conceptsを参照してください。

エレメント定義の最後は、エレメントを登録するためのJavaScriptです。 エレメントに<dom-module>がある場合、このスクリプトは通常、<dom-module>内部に配置されます。

スタートコード—エレメントの登録

<script>
  class IconToggle extends Polymer.Element {
    static get is() {
      return "icon-toggle";
    }
    constructor() {
      super();
    }
  }
  customElements.define(IconToggle.is, IconToggle);
</script>

重要事項:

  • PolymerはES6クラスの構文を使用します。このコードでは、ベースのPolymer.Elementクラスを拡張して独自のクラスを作成します:

    class IconToggle extends Polymer.Element {...}
    
  • 新しい要素に名前を付けると、タグを使用するときにブラウザがそれを認識できるようになります。この名前は、エレメントのテンプレート定義(<dom-module id="icon-toggle">)で指定されたidと一致する必要があります。

    static get is() {
      return "icon-toggle";
    }
    
  • この要素にはコンストラクタがあります:

    constructor() {
      super();
    }
    

    現時点では、このコンストラクタは何もしていません。後で使用するので、プレースホルダーとしてここに含まれています。

  • スクリプトの最後の行でCustom Elements APIから "define"メソッドを呼び出してエレメントを登録します:

    customElements.define(IconToggle.is, IconToggle);
    

ローカルDOM構造を作成する

ここまでで、エレメントの基本的なレイアウトについて学んできました。次にローカルDOMテンプレートに具体的な内容を追加していきます。

shadow DOM goes hereというコメントの下にある<span>を探しましょう:

icon-toggle.html—before

    <!-- shadow DOM goes here -->
    <span>Not much here yet.</span>
  </template>

<span>とその内容を以下の<iron-icon>タグに置き換えます:

icon-toggle.html—after

    <!-- shadow DOM goes here -->
    <iron-icon icon="polymer">
    </iron-icon>
  </template>

重要事項:

  • <iron-icon>エレメントは、アイコンをレンダリングするCustom Elementです。ここでは、 "Polymer"という名前のアイコンを使用するようにハードコードされています。

ローカルDOMをスタイリングする

Shadow DOMを扱うための新しいいくつかのCSSセレクターがあります。icon-toggle.htmlファイルには、前述の:hostセレクタがすでに含まれており、トップレベルの<icon-toggle>エレメントをスタイリングすることができます。

<iron-icon>エレメントをスタイリングするには、既存のコンテンツの後の<style>タグ内にCSSを追加します。

icon-toggle.html: Before

    <style>
      /* shadow DOM styles go here */
      :host {
        display: inline-block;
      }
    </style>

icon-toggle.html: After

    <style>
      /* shadow DOM styles go here */
      :host {
        display: inline-block;
      }
      iron-icon {
        fill: rgba(0,0,0,0);
        stroke: currentcolor;
      }
      :host([pressed]) iron-icon {
        fill: currentcolor;
      }
    </style>

重要事項:

  • <iron-icon> タグはSVGアイコンを使用します。fillstrokeのプロパティは、SVG固有のCSSプロパティです。それぞれアイコンの塗りつぶしの色と輪郭の色を設定します。

  • :host() 関数は、カッコ内のセレクタがhost要素の属性と一致する場合、host要素と一致します。この場合、[pressed]は標準のCSS属性セレクタなので、icon-togglepressed属性が設定されている場合にこのルールが適用されます。

Custom Elementの定義は次のようになるはずです:

icon-toggle.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<dom-module id="icon-toggle">
  <template>
    <style>
      /* shadow DOM styles go here */
      :host {
        display: inline-block;
      }
      iron-icon {
        fill: rgba(0,0,0,0);
        stroke: currentcolor;
      }
      :host([pressed]) iron-icon {
        fill: currentcolor;
      }
    </style>
    <!-- shadow DOM goes here -->
    <iron-icon icon="polymer"></iron-icon>
  </template>
  <script>
    class IconToggle extends Polymer.Element {
      static get is() {
      return "icon-toggle";
      }
      constructor() {
        super();
      }
    }
    customElements.define(IconToggle.is, IconToggle);
  </script>
</dom-module>

polymer serve動作していることを確認し、デモページをリロードしてください。トグルボタンがハードコードされたアイコンで表示されるはずです。

Demo showing icon toggles displaying Polymer icon

デモではpressed属性が設定されているため、1つのトグルが押されたときのスタイルになっているのがわかると思います。 しかし、あなたがクリックしたいところをすべてクリックしても、ボタンはトグルされません。 なぜなら、pressedプロパティを変更するコードがないからです。

もし新しいトグルが表示されない場合、 上のコードとファイルを再度確認してください。空白のページが表示された場合は、デモフォルダまたはdemo/index.htmlを開いていることを確認してください。

Previous step: イントロ Next step: データバインディングとプロパティを使う