Polymer 関連で調べたことのまとめ(FOUC, CSSセレクタ編)
Polymer に魅了されてしまった今日このごろ。
Polymer 関連で調べたことをまとめておきます。
Polymer FOUC prevention
FOUC?
FOUC の回避方法
Polymer で Custom Element を作成した場合、ブラウザが Custom Element の定義を登録し終わると HTML Element として表示される。
このため、ネットワークが遅い環境などでは、Custom Element の準備ができるまでに時間がかかる。
この問題を回避するために、 CSS の擬似クラス:unresolved
が使える。
この擬似クラスを使用することで、 Custom Element の準備の完了を検知することができる。
- CSS
:unresolved
は、Chrome 29からサポートされている。未サポートのブラウザに対応するためには、Polymerの FOUC prevention 機能を使う必要がある。
Polymer 未サポートブラウザのための CSS セレクタの書き方
polyfill-next-selector
Shadow DOM 配下の要素に対する CSS セレクタとして、Polymer では polyfill-*
という独自のセレクタを提供している。
これを使用することで、Safari などのブラウザでも Shadow DOM 配下の要素に CSS を適用することができる。
polyfill-next-selector 使い方
polyfill-next-selector {}
を polyfill したい箇所に書くpolyfill-next-selector
の中にcontent
プロパティを定義するcontent
の値には、通常の CSS セレクタの書き方にだいたい従ってセレクタを記述する
「だいたい」とか意味わからないので、具体例。
polyfill-next-selector { content: ':host .bar'; } ::content .bar { color: red; } polyfill-next-selector { content: ':host > .bar'; } * ::content .bar { color: blue; } polyfill-next-selector { content: '.container > *'; } ::content * { border: 1px solid black; }
上記のような polyfill-next-selector を定義すると、chrome で表示する場合など、ネイティブな Shadow DOM 環境では、何も起きない。
そして、Polymer をサポートしていない、polyfill 環境では、表示される際以下のように書き換えられる。
polyfill-next-selector { content: ':host .bar'; } ::content .bar { color: red; } polyfill-next-selector { content: ':host > .bar'; } * ::content .bar { color: blue; } polyfill-next-selector { content: '.container > *'; } ::content * { border: 1px solid black; }
その他にも使えそうなスタイリングルール
polyfill-rule
polyfill 環境下でのみ、適用したいスタイルを記述するのに使用できる。
polyfill-rule { content: '.bar'; background: red; }
こう書いておけば、Polyemer をサポートしている ネイティブな Shadow DOM 環境では、何も起きない。
polyfill 環境では、以下のように書き換えられる。
x-foo .bar { background: red; }
polyfill-unscoped-rule
polyfill-rule
の逆で、ネイティブな Shadow DOM 環境にのみ適用するルール。
polyfill-unscoped-rule { content: '#menu > .bar'; background: blue; }
こう書いておけば、ネイティブ Shadow DOM 環境でのみ、以下のように書き換えられる。
#menu > .bar { background: blue; }
--