Web ComponentsとPolymerをさわってみる。

いまさらですが、Web Componentsってナニ？
ってことをサラッと書きたいと思います。

Web Componentsとは

Web Componentsは新しく提案されたウェブブラウザ向け API 一式の総称。
下記のW3C 提案をまとめてWeb Components というらしい。

Custom Elements
⇒ ウェブ開発者が HTML に独自のタグを追加できる仕組み。

HTML Imports
⇒ HTML Imports は別ファイルに定義した Custom Elements をページ内に読み込む仕組み。
（プログラミング言語の require や import みたいなもの）

HTML Templates
⇒ ページ本体のDOMと切り離されたHTMLを生成することができる仕組み。
（HTML Templates に定義された <template> タグでテンプレート用の HTML を囲んでおくと、 ページ本体の DOM とは切り離され、<img> や <video> を書いてもロードはおこらないし、<style> は適用されず <script> は実行されない）

Shadow DOM
⇒ DOM要素のレンダリング結果を、その要素が持つDOM のサブツリーとは独立に与える仕組み。
（DOMツリーをカプセル化し、ページの他の部分からDOMツリーを分離することができる）

Web Animations
⇒ CSS Animations と CSS Transitions と SVG Animations を 統合する仕組み。

Pointer Events
⇒ マウス、タッチ、ペンのイベントを統一する仕組み。

Polymerとは？

新しいAPI に依存してしまい、一体どのブラウザなら動くのかということになる。

そこで、Polymerの提供しているplatform.jsを使えば該当APIをJavaScriptで再実装し、ブラウザにまだない機能を補ってくれる。

Web ComponentsのPolyfillライブラリがplatform.jsで、その上で動作するUIフレームワークがpolymer.js。

Polymerにはdesigner toolもあり、コードを書かなくてもUIを生成することができます。
（使ったことないけど、いい感じなのかな？）

更に、Polymerにはレイアウトの例だったり、アイコン群のサンプルがあります。

PolymerとWeb Componentsの関連は、下記を見ると分かりやすいです。
（各APIの土台の上に、platform.jsがあり、polymer.jsがある）

図. PolymerとWeb Components

＊画像をお借りしました！

Polymerを試してみる