Polymer > Polymer3 > Polymer element その１

Polymer elementのチュートリアルに沿ってやってみました。
日本語意訳しています。

Step By Step

icon-toggleコンポーネントを作る事で勧めていきます。
最初にPolymerを使わない環境から初めて、徐々にPolymerを使うコードに変えていきます。

Step 1: Set up

以下の内容に沿って勧めます。

Step 1: Set up - Polymer Project

３つの内ステップから成ってます。

1. Polymer CLI.のインストール
2. 演習用コードのダウンロード
3. デモの開始

それではさっそくやっていきます。

1. Polymer CLI.のインストール

npm install -g polymer-cli

2. 演習用コードのダウンロード

git clone https://github.com/PolymerLabs/polymer-3-first-element.git
cd polymer-3-first-element
npm install

3. デモの開始

polymer serve --open

以下の画面が出たらOK。
表示されるメッセージは、まだPolymer使ってませんよという意味あい。

Step 2: Add shadow DOM

Step 2: Add shadow DOM - Polymer Project

このステップ２も、３つの内ステップから成ってます。

1. code を見てみよう
2. custom element の追加
3. styleの変更

1. code を見てみよう

トップレベルに存在するicon-toggle.jsの説明からです。
このicon-toggle.jsが<icon-toggle>というカスタムエレメントを構成するファイルとなります。

icon-toggle.jsについて

• @polymer/polymer/polymer-element.js
  これはモジュールセパレーターで、Polymer CLI がモジュールのパスを解決してくれます。

• iron-icon.js
  既存のPolymer要素<iron-icon>の定義。これは<icon-toggle>として後程使用します。

• icon-toggle.js
  PolymerElement基本クラスを拡張する新しいクラスIconToggleを定義します。

PolymerElement基本クラス

icon-toggle.jsでは、PolymerElementクラスを基底にクラスIconToggleを定義しています。

class IconToggle extends PolymerElement {
  ...
}

Polymer 3.0では、ES6クラスの構文が使用されています。
PolymerElementには、shadow DOM、データ、イベント等、 'custom element'の開発に役立つさまざまな機能を持っています。

テンプレートの定義

Polymer 3.0では、static getter関数を使用してテンプレートを定義します。

static get template() {
  return html`
    <style>
    略
    </style>
    <span>Not much here yet.</span>
  `;
}

クラスコンストラクタのオーバーライド

constructor() {
  super();
}

コンストラクタを使う（オーバーライドする）場合は、必ず最初でsuper（）を呼ぶ必要があります。

サンプルのこのコンストラクタ処理では、特に何もしていません。

custom elementを登録する

IconToggle のクラス定義の後に、IconToggleをレジスト(登録)する処理を行います。

customElements.define('icon-toggle', IconToggle);

このコードは、<icon-toggle>として、Webブラウザで使えるようにします。

2. custom element の追加

実際にcustom element (<icon-toggle>) を使っていきます。

icon-toggle.jsのspanタグをiron-iconに変更します。

icon-toggle.js

<span>Not much here yet.</span>
 ↓
<iron-icon icon="polymer"></iron-icon>

画面をリロードすると以下のように'Not much here yet.'がアイコンに変わったと思います。

この例では、"polymer"アイコンを使うように指定されてます。
いともあっさりcustom elementを使うことができました。

3. Styleの変更

icon-toggle.js でのIconToggleでは2つのCSSスタイルが含まれています：

<style>
span {
  color: blue;
}
:host {
  display: inline-block;
}
</style>

スタイルの説明

• span： <icon-toggle>に内包される<span>に対するスタイル定義
• host：<icon-toggle>自体自体のスタイル定義

先ほど、<span>を<iron-icon>に変更したので<style>ブロックを次のコードに置き換えます。

icon-toggle.js

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

※ host([pressed]) iron-icon
host() ではかっこ内の属性にマッチした場合にStyleが適用されます。

リロードすると以下のような画面になるはずです。

demo-element.js中DemoElementでpressed属性が設定されているものと、されていないものがあるので、白と黒で表示されています。
しかし、クリックしてもボタンボタンに変化がありません。
これは クリック処理のコードがまだ設定してないからです。
クリック処理に関しては次の章で説明していきます。

総括

ここまででicon-toggle.jsは以下のようになっていると思います。

icon-toggle.js

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-icon/iron-icon.js';

class IconToggle extends PolymerElement {
  static get template() {
    return html`
      <style>
        :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>
    `;
  }
  constructor() {
    super();
  }
}

customElements.define('icon-toggle', IconToggle);

---

その２へ続く

ソースは以下に保存しました。
sugasaki/polymer-3-first-element-tutorial