ComponentsはWebのUIのコンポーネント化を実現するための各種仕様の総称だ。Importsを含む。Templatesも含まれていたが、つい最近HTML仕様に組み込まれたようだ。Componentsについて調べていると、Decoratorsという仕様にふれていることもあるが、これのことは忘れて良いらしい。Editorである夷藤さんのお話が実にわかりやすいとはおもうので、そちらを観るのをおすすめする。夷藤さんのスライドはこちら。ひとつ紹介するのがPolymerだ。Components、周辺仕様のポリフィル(ブラウザが未対応な仕様の補完)をしてくれるライブラリともいえるし、コンポーネント集でもある。ExtendedでのLTのときに色々とつくってみた。この時にも触ってみたかっただけなので、いざつくってみると設計が難しく、今おもえばデタラメな設計なので、そのものをあまり参考はしない方がいいとおもう。Osmani氏の記事で紹介されているYeomanのPolymerジェネレータのタスクを使えば非常に簡単。polymerこういうのを叩いていくイメージ。(スライドにも書いてる。DOMを有効にすると、Inspectしたときに隠れているDOMをみることができる。先ほどの僕のつくったサンプルも、普通にHTMLのソースをみたときと、DevToolでInspectしたときと見比べるといいかもしれない。ブラウザのネイティブで実装されているvideo要素などをInspectしてみてほしい。それらにも隠れているDOMをみることができるはず。Componentsに触れて良いとおもうのはまさにこういうところで、コントローラーUI付きでビデオを埋め込みたいときに、UIを頑張って作る、または深く構造を知る必要なく、<video>と<source>を組み合わせれば良いわけだ。DOMによるカプセル化で、本当に独立したコンポーネントをつくられることが楽しい。カプセル化もうひとつのサンプル、iOS7のスイッチUIを模したもの。これは次のようなマークアップでつくることができる。![](/images/try-web-components-and-polymer/01.png)<x-switch></x-switch>かなり手抜きでオン/オフの管理などは省いている。そもそもこの見た目をつくるだけなら、わざわざコンポーネント化することなく、ただclassをあてれば良いだけのものなのだが、注目してほしいのはそこではない。このコンポーネントの中身を除くと下記のようになっている。/></template></polymer-element>これはPolymerを通してつくったx-switchコンポーネント。注目してほしいのは、<style>に記述されたルールだ。このコンポーネントではinput[type=checkbox]といったセレクタで、通常であればブラウザデフォルトのチェックボックスすべてに影響してしまう。サンプルを確認してもらうとわかる通り、このiOS7ライクなチェックボックスの前後にはブラウザデフォルトの見た目のままのチェックボックスが確認できるはず。![](/images/try-web-components-and-polymer/02.png)つまりコンポーネント内で定義したスタイルは外に汚染することはない。今のCSSではこうした汚染というのは容易に起こる。ゆえに強固なセレクタを用いたり、または命名を工夫して衝突・汚染することがないようにするなど、100%安全とはいえない方法で回避せざるをえない。Componentsを実際の中・大規模な仕事の中で扱う、運用する経験はまだ無いので、見えていない問題は色々あるかもしれない。メンテナンス性であるとか、無秩序にチームの開発者がコンポーネントを作成・編集すれば混沌としてしまうだろう。下手をすると、現状のHTML/CSSにおける同等の問題以上に問題となるかもしれない。Componentsには面白みがあるとおもっている。今回紹介したリソースを参照して、是非試してみてほしい。2013の5日目の記事として書いた。次はGinpeiさんです。SpeakerBY-NC-SA。