9787


お世話になってます。  
現在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です。  
![画像の説明をここに入力](https://i.stack.imgur.com/6SAEX.png)  
Web Componentsで生成するhtmlのコードです。

宜しくお願い致します。


CC BY-SA 3.0
2015-05-01T07:45:39.337
9736
2015-05-04T09:50:54.540
2015-05-04T09:50:54.540
297
297
question
html css bootstrap polymer web-component
PolymerとBootstrapの併用について


コードが無いので推測ですが、それは不具合では無く ShadowDOM の仕様によるものだと考えられます。

ShadowDOM は CSS の境界を作ります。  
ShadowDOM の外で定義された CSS ルールは、ShadowDOM の内部に影響を与えません。  
ShadowDOM の中で定義された CSS ルールは、ShadowDOM の外部に影響を与えません。

つまり、Web Components の内部で使う CSS は、Web Components の内部に書かなければいけません。  
そして、例えば `table { background: red; }` のようなルールを定義したとしても、それは Web Components
の内部にしか影響を与えません (外にあるテーブルの色は変わりません)。


CC BY-SA 3.0
2015-05-03T05:35:22.123
9787
2015-05-03T05:35:22.123
4809
9736
answer