Polymer > Polymer3 > Polymer element その１



[Polymer elementのチュートリアル](https://polymer-library.polymer-project.org/3.0/docs/first-element/intro)に沿ってやってみました。
日本語意訳しています。


# Step By Step

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

# Step 1: Set up

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

[Step 1: Set up - Polymer Project](https://polymer-library.polymer-project.org/3.0/docs/first-element/intro)

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

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

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

## 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](https://qiita-image-store.s3.amazonaws.com/0/49910/9e618f80-c87b-6905-8022-e27af033c291.png)


# Step 2: Add shadow DOM

[Step 2: Add shadow DOM - Polymer Project](https://polymer-library.polymer-project.org/3.0/docs/first-element/step-2)

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

1. code を見てみよう
1. custom element の追加
1. 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を定義しています。

```js
class IconToggle extends PolymerElement {
  ...
}
```

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


### テンプレートの定義

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

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


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

```js
constructor() {
  super();
}
```

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

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


### custom elementを登録する

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

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

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



## 2. custom element の追加

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

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

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d665a9d1-b3ae-e22f-7250-7fda18c45e5a.png)

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


### 3.  Styleの変更

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

```css
<style>
span {
  color: blue;
}
:host {
  display: inline-block;
}
</style>
```
スタイルの説明
* span： `<icon-toggle>`に内包される`<span>`に対するスタイル定義
* host：`<icon-toggle>`自体自体のスタイル定義

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

```js: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](https://qiita-image-store.s3.amazonaws.com/0/49910/47b1ceac-4428-57d4-b30a-2d02d350c7e9.png)

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


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

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


---
[その２](https://qiita.com/sugasaki/items/506a110e8dfe33fca4de)へ続く


ソースは以下に保存しました。
[sugasaki/polymer-3-first-element-tutorial](https://github.com/sugasaki/polymer-3-first-element-tutorial)