Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away