Polymer 未サポートブラウザのための CSS セレクタの書き方

Polymer の スタイルをSafariなど polyfill 環境で動作させる方法がよくわからなかったので、調べてみました。

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 環境では、表示される際以下のように書き換えられる。

x-foo .bar {
  color: red;
}

x-foo > .bar {
  color: blue;
}

x-foo .container > * {
  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