3

お世話になってます。
現在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のコードです。

宜しくお願い致します。

1 件の回答 1

2

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

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

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

2
  • さっそくの回答ありがとうございます。 ShadowDOMの仕様ですか。全くの盲点でした。 まだまだ、勉強が足りないようです。 ShadowDOMの外で定義されたCSSのルールが適用されないため、 Web Componentsで新たに生成したhtmlの中ではBootstrapのCSSが効かないのだとの意味でしょうか? もしそうでしたら、Web Componentで生成したhtmlに<link>でCSSをリンクしてもCSSの実態が外にあるからCSSのルールが適用されないのでしょうか?
    – chonbo
    Commented 2015年5月4日 9:41
  • はい。ShadowDOMの中に書かれたstyleタグであれば、そのShadowDOMの内部の要素に適用されます。linkタグによるスタイルの引用は、本来の仕様では適用されません。しかし、PolymerはShadowDOMの中にあるlinkタグを見つけると、ajaxでcssファイルを取得してstyleタグとして展開してくれます。そのため、Polymerを使っていれば、ShadowDOM内でlinkタグを書けば意図通りの結果になると思います。
    – mysticatea
    Commented 2015年5月4日 9:54

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。