WebComponetsとは？
開発者がHTMLに独自の要素を定義できる仕組みです。
例）見慣れたHTMLタグ
html
<input><img><li><a>
例）独自のHTML
このタグを設置すると、GoogleMapが埋め込まれます。
属性値に値を設定することで、マップ情報をカスタムできる。
html
<google-map>
WebComponetsを使うことで、HTMLをすっきり書けます。
要するに、HTML,CSS,JavaScriptをコンポーネント化する技術を指してます。
WebComponentsを構成する技術
WebComponentsを構成する技術は大きく４つの技術があります
- Templates
- Shadow DOM
- Custom Elements
- HTML Imports
Templates
TemplatesはUIパーツのテンプレート。
要素にHTMLとCSSを定義していきます。
Shadow DOM
ページの他の部分からDOMツリーを分離することができます。
既存のHTML、CSSにはスコープの概念がありませんでしたが、Shadow DOMによって、HTML、CSSにおいてもスコープが使用可能になります。
Custom Elements
開発者独自のHTML要素をつくることができます。
それに加えて、ほかの要素を継承することができます。
なので、既存のHTML要素を拡張したり、修正したりすることが可能です。
HTML Imports
HTML Importsは別ファイルとして作成されたHTMLドキュメントを読み込み、再利用するための仕組みです。
まとめ
この仕組みを使えるようにすることができるのがWebComponentsです。
そして、この技術を使えるのがpolymerです！