Polymer elementのチュートリアルに沿ってやってみました。
日本語意訳しています。
Step By Step
icon-toggleコンポーネントを作る事で勧めていきます。
最初にPolymerを使わない環境から初めて、徐々にPolymerを使うコードに変えていきます。
Step 1: Set up
以下の内容に沿って勧めます。
Step 1: Set up - Polymer Project
３つの内ステップから成ってます。
- Polymer CLI.のインストール
- 演習用コードのダウンロード
- デモの開始
それではさっそくやっていきます。
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
このステップ２も、３つの内ステップから成ってます。
- code を見てみよう
- custom element の追加
- 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に変更します。
<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>ブロックを次のコードに置き換えます。
<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は以下のようになっていると思います。
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