質問: お世話になってます。 現在Bootstrapを使用してWebサイトを開発しています。 しかし、Polymerを利用して部品化してみようと思い、Polymerを導入したのですが、BootstrapのclassがComponentに反映されなかったりと何かと不具合が生じています。 Componentのhtmlには polymer.htmlとbootstrap.min.cssをlinkしています。 具体的な不具合の例として ・header内に定義したComponentのh1などの文字が小さくなる。(fontが変更されている?) ・Bootstrapのclassが要素に反映されない。 img-circle等が反映されない。Component化しなければ反映されるのでブラウザの問題 ではなさそうです。 といった事が生じています。 BootstrapとPolymerは併用するべきではないのでしょうか? Polymerのverは0.5.0 Bootstrapのverは3.3.4です。 !画像の説明をここに入力 Web Componentsで生成するhtmlのコードです。 宜しくお願い致します。
回答: コードが無いので推測ですが、それは不具合では無く ShadowDOM の仕様によるものだと考えられます。 ShadowDOM は CSS の境界を作ります。 ShadowDOM の外で定義された CSS ルールは、ShadowDOM の内部に影響を与えません。 ShadowDOM の中で定義された CSS ルールは、ShadowDOM の外部に影響を与えません。 つまり、Web Components の内部で使う CSS は、Web Components の内部に書かなければいけません。 そして、例えば `table { background: red; }` のようなルールを定義したとしても、それは Web Components の内部にしか影響を与えません (外にあるテーブルの色は変わりません)。