WebComponetsとは？

開発者がHTMLに独自の要素を定義できる仕組みです。
例）見慣れたHTMLタグ

html

<input><img><li><a>

例）独自のHTML
このタグを設置すると、GoogleMapが埋め込まれます。
属性値に値を設定することで、マップ情報をカスタムできる。

html

<google-map>

WebComponetsを使うことで、HTMLをすっきり書けます。
要するに、HTML,CSS,JavaScriptをコンポーネント化する技術を指してます。

WebComponentsを構成する技術

WebComponentsを構成する技術は大きく４つの技術があります

TemplatesはUIパーツのテンプレート。
要素にHTMLとCSSを定義していきます。

ページの他の部分からDOMツリーを分離することができます。
既存のHTML、CSSにはスコープの概念がありませんでしたが、Shadow DOMによって、HTML、CSSにおいてもスコープが使用可能になります。

開発者独自のHTML要素をつくることができます。
それに加えて、ほかの要素を継承することができます。
なので、既存のHTML要素を拡張したり、修正したりすることが可能です。

HTML Importsは別ファイルとして作成されたHTMLドキュメントを読み込み、再利用するための仕組みです。

この仕組みを使えるようにすることができるのがWebComponentsです。
そして、この技術を使えるのがpolymerです！