ぶるーすくりーん

ぽんこつプログラマ日記

Polymer 関連で調べたことのまとめ(FOUC, CSSセレクタ編)

Polymer に魅了されてしまった今日このごろ。
Polymer 関連で調べたことをまとめておきます。

Polymer FOUC prevention

FOUC?

  • Flash of Unstyled Content
  • CSSが適用されていないコンテンツが一瞬表示されること

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;
}

--

参考:Polyfill CSS selectors