LoginSignup
7
7

More than 5 years have passed since last update.

Polymer の Shadow DOM Polyfill

Last updated at Posted at 2014-04-06

Polymerは、WebComponentsが実装されてないブラウザにもWebComponentsの機能を使えるようにするためのPolyfillを提供している。(Polymerの一部であるplatform.jsというのがPolyfillのためのライブラリ)

Browser Compatibility - Polymer

ただ、あたりまえだけどShadow DOMの機能だけは正確にPolyfillできてないみたい。例えばpolymer-ui-clockというコンポーネントをShadow DOMに対応していないブラウザで見てみると次のように、単にカスタムエレメントの子要素にDOMを追加しただけで、CSSも単にhead要素内に展開されているだけである。

スクリーンショット 2014-04-06 18.05.38.png

なので、例えば次のようなCSSがあったら、#widget-titleのテキストは赤色になる。

div {
  color: red;
}

これがShadow DOMだと外側からのCSSに影響を受けない。

まあこの挙動をPolyfillでどうにかするのは現実的ではないのでいいんだけど、やはりShadow DOMはブラウザ側に実装してもらわないとどうにもならん機能だというのはわかった。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7