Web ComponentsはWebのUIのコンポーネント化を実現するための各種仕様の総称だ。

DOMとスタイルをカプセル化するShadow DOM、任意の要素または既存の要素を拡張するCustom Elements、それらをパッケージ化し再利用できるようにするためのHTML Importsを含む。

マークアップをテンプレート化するHTML Templatesも含まれていたが、つい最近HTML仕様に組み込まれたようだ。

ちなみにWeb Componentsについて調べていると、Decoratorsという仕様にふれていることもあるが、これのことは忘れて良いらしい。

Web Componentsの仕様・仕組みについては、先日おこなわれたHTML5 Conferenceで、Shadow DOMのSpec Editorである夷藤さんのお話が実にわかりやすいとはおもうので、そちらを観るのをおすすめする。

夷藤さんのスライドはこちら。

と、もうひとつ紹介するのがPolymerだ。こちらも先ほどの資料後半でも解説されているのだが、Web Components、周辺仕様のポリフィル（ブラウザが未対応な仕様の補完）をしてくれるライブラリともいえるし、コンポーネント集でもある。

実際にこれらを使って作ったものは、以前おこなわれたFrontrend x Chrome Tech Talk Night ExtendedでのLTのときに色々とつくってみた。

この時にも触ってみたかっただけなので、いざつくってみると設計が難しく、今おもえばデタラメな設計なので、そのものをあまり参考はしない方がいいとおもう。これらは特に難しいことをしてつくったわけではなく、当日イベントにもきてたAddy Osmani氏の記事で紹介されているYeomanのPolymerジェネレータのタスクを使えば非常に簡単。

$ npm install -g yo
$ npm install generator-polymer -g
$ mkdir my-new-project && cd $_
$ yo polymer

こういうのを叩いていくイメージ。（スライドにも書いてる。）

ちなみにGoogle Chromeを使っている場合は、最近のバージョンだと

Settings > General > Elements > Show Shadow DOM

を有効にすると、Inspectしたときに隠れているDOMをみることができる。先ほどの僕のつくったサンプルも、普通にHTMLのソースをみたときと、DevToolでInspectしたときと見比べるといいかもしれない。

ブラウザのネイティブで実装されているvideo要素などをInspectしてみてほしい。それらにも隠れているDOMをみることができるはず。

Web Componentsに触れて良いとおもうのはまさにこういうところで、コントローラーUI付きでビデオを埋め込みたいときに、UIを頑張って作る、または深く構造を知る必要なく、<video>と<source>を組み合わせれば良いわけだ。

そしてShadow DOMによるカプセル化で、本当に独立したコンポーネントをつくられることが楽しい。

カプセル化

もうひとつのサンプル、iOS7のスイッチUIを模したもの。

これは次のようなマークアップでつくることができる。

<x-switch></x-switch>

かなり手抜きでオン/オフの管理などは省いている。そもそもこの見た目をつくるだけなら、わざわざコンポーネント化することなく、ただclassをあてれば良いだけのものなのだが、注目してほしいのはそこではない。

このコンポーネントの中身を除くと下記のようになっている。

<polymer-element name="x-switch" attributes="">
<template>
<style>
@host { 
  :scope {
    display: inline-block;
  }
}
input[type=checkbox] {
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 1px #e6e6e6;
  border-radius: 15px;
  ...
}
input[type=checkbox]:checked {
  box-shadow: inset 0px 0px 0px 20px #53d76a;
}
input[type=checkbox]:after {
  content: '';
  position: absolute;
  width: 29px;
  height: 29px;
  ...
}
input[type="checkbox"]:checked:after {
  left: 22px;
}
</style>
<input type="checkbox" />
</template>
</polymer-element>

これはPolymerを通してつくったx-switchコンポーネント。注目してほしいのは、<style>に記述されたルールだ。

このコンポーネントではinput[type=checkbox]といったセレクタで、通常であればブラウザデフォルトのチェックボックスすべてに影響してしまう。

だが、サンプルを確認してもらうとわかる通り、このiOS7ライクなチェックボックスの前後にはブラウザデフォルトの見た目のままのチェックボックスが確認できるはず。

つまりコンポーネント内で定義したスタイルは外に汚染することはない。素晴らしい。

今のCSSではこうした汚染というのは容易に起こる。ゆえに強固なセレクタを用いたり、または命名を工夫して衝突・汚染することがないようにするなど、100%安全とはいえない方法で回避せざるをえない。
(それがCSSの良さともいえるかもしれないけど)

実際にWeb Componentsを実際の中・大規模な仕事の中で扱う、運用する経験はまだ無いので、見えていない問題は色々あるかもしれない。メンテナンス性であるとか、無秩序にチームの開発者がコンポーネントを作成・編集すれば混沌としてしまうだろう。
下手をすると、現状のHTML/CSSにおける同等の問題以上に問題となるかもしれない。

と、ネガティブに考える以上に、Web Componentsには面白みがあるとおもっている。今回紹介したリソースを参照して、是非試してみてほしい。

というわけで

本記事はFrontrend Advent Calendar 2013の5日目の記事として書いた。
次はGinpeiさんです。