WebComponents
Polymer
Polymer3

Polymer > Polymer3 > Polymer element その1

Polymer elementのチュートリアルに沿ってやってみました。

日本語意訳しています。


Step By Step

icon-toggleコンポーネントを作る事で勧めていきます。

最初にPolymerを使わない環境から初めて、徐々にPolymerを使うコードに変えていきます。


Step 1: Set up

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

Step 1: Set up - Polymer Project

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


  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使ってませんよという意味あい。

image


Step 2: Add shadow DOM

Step 2: Add shadow DOM - Polymer Project

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


  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.'がアイコンに変わったと思います。

image

この例では、"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が適用されます。

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

image

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);



その2へ続く

ソースは以下に保存しました。

sugasaki/polymer-3-first-element-tutorial