Step 3. エレメントの追加

アプリケーションへの新規ビュー追加が済み、ビューの細かい箇所を構築するスタートラインに立ちました。

この過程において、例えばwebcomponents.orgのような既成のコンポーネントを使用したいと思うかもしれません。

既成のコンポーネントのインストール

インストールしたいコンポーネントを特定したら、コンポーネントのbowerパッケージ名を探してください。

本ステップでは、webcomponents.orgに掲載されているPolymerの<paper-checkbox>エレメントをアプリケーションに追加します。Bowerを使用してインストールすることができます。

プロジェクトのルートディレクトリから次のコマンドを実行してください：

bower install --save PolymerElements/paper-checkbox

アプリケーションへのエレメント追加

テキストエディタでsrc/my-new-view.htmlを開きます。
依存ファイルであるpaper-checkbox.htmlをimportします。

既存のpolymer-element.htmlを読み込んでいる文の下部に、次の文を追加します：
```
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
```

テンプレートに<paper-checkbox>エレメントを追加します。

<paper-checkbox>Ready to deploy!</paper-checkbox>

前の手順で追加した<h1>の下に追加します。新しいテンプレートは次のようになります：

<!-- Defines the element's style and local DOM -->
<template>
  <style>
    :host {
      display: block;

      padding: 16px;
    }
  </style>

  <h1>New view</h1>
  <paper-checkbox>Ready to deploy!</paper-checkbox>
</template>

これで、新しいビューの中で動作しているpaper-checkboxを見つけられるはずです：

Example of page with checkbox

次のステップ

サードパーティのコンポーネントをページに追加しました。次は、Webへのアプリケーションのデプロイ方法を学んでいきます。