webcomponentsjs (WebComponents v1 polyfills) についての備忘録

※ はてなブログから技術ネタを移動しました
※ 初稿：2017-03-16

とてつもなく久々の投稿ですが、ここのところ人柱コード書いていてところどころハマリポイントが見つかったりしているので、悩める人々の光になる可能性が0.0001%でもあればと思いメモ。

HTML5で好きなタグ名でカスタム要素を定義できる、CustomElementsで遊んでいます。
ShadowDOMなどと組み合わされるので、実装の瑣末なものを隠蔽したりして、よりセマンティックなウェブページを構成できます。

GitHub - webcomponents/webcomponentsjs: A suite of polyfills supporting the HTML Web Components specs

loaderをカスタムしたりしています
GitHub - misttechnologies/webcomponentsjs: A suite of polyfills supporting the HTML Web Components specs
（追記）本家がアップデートされてloaderがマシな感じになったので、もうカスタムloaderは使っていません。

以下、ハマったポイント

1. ShadyDOM / ShadyCSSを使う場合はShadyCSS.prepareTemplate()メソッドでtemplateをゴニョゴニョしてあげないといけない

   IEとFirefoxに該当。
   nativeのshadowDOM tree内のcssセレクタをエミュレートするために、cssスコーピングのためのクラスをshadowRootノードに, :hostセレクタなどをhostのタグ名に変換する必要がある.

   if (ShadyCSS) { ShadyCSS.prepareTemplate(template, "hoge-element"); }
   

   てなノリで。

2. あるCustomElementのShadowDOMの中で別のCustomElementを使う場合（IE たぶん11以下 限定）

   外側クラスを先にcustomElements.define()してupgradeElementさせ、そのあとに内側クラスをcustomElements.define()してupgradeElementさせないといけない。
   少なくともIE11で、これに気づかないと動かない。他のChrome, Firefoxなどのモダンな奴らは大丈夫。
   これは、内側で使われているCustomElementの定義を先にした上で、外側のShadowDOMをtemplateを使って構築しようとすると、template内のdocumentFragmentがぶっ壊れるから。外側templateのDOMパース中に不意に内側customElementがupgradeされることが想定されていないらしい。

3. あと、polyfillのロード完了タイミング制御が割と難しい。

   WebComponentsReadyなるCustomEventも飛んでくるが、あんまりアテにならない。