webcomponentsjs (WebComponents v1 polyfills) についての備忘録
とてつもなく久々の投稿ですが、ここのところ人柱コード書いていてところどころハマリポイントが見つかったりしているので、悩める人々の光になる可能性が0.0001%でもあればと思いメモ。
HTML5で好きなタグ名でカスタム要素を定義できる、CustomElementsで遊んでいます。
ShadowDOMなどと組み合わされるので、実装の瑣末なものを隠蔽したりして、よりセマンティックなウェブページを構成できます。
loaderをカスタムしたりしています
GitHub - misttechnologies/webcomponentsjs: A suite of polyfills supporting the HTML Web Components specs
以下、ハマったポイント
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も飛んでくるが、あんまりアテにならない。
