ウェブコンポーネントのシャドードーム用の外部スタイルシート

Question

シャドウルートを使用してWebコンポーネントを学習しています。すぐに使えるコードで外部スタイルシートを読み込むことができない場合、Googleで見つからないようですか？私はポリマーやその他のWebコンポーネントライブラリ（まだ）を使用していません。以下のコード：

リンクタグを最初のスクリプトタグの上に配置すると、Webコンポーネント全体ではなくウェブ全体のスタイルがスタイルされます。

私がdiv.holla-backの下に置いた場合、それは何もスタイルしません。

Webコンポーネントで外部スタイルシートを使用するにはどうすればよいですか？

Answer 1

リンクタグはシャドウDOMでは不活性です。according to the specただし、@importを使用することはできますが、それには独自のパフォーマンスの問題があります。

ポリマーの仕組みは、linkタグを見て、xhrを使ってそれらのスタイルをロードして適用します。

編集：シャドウDOMに取り組ん

人々はこの欠点を認識し、それを固定する必要があること。うまくいけば、将来、外部スタイルシートをサポートするシステムを考え出すことができます。

Answer 2

シャドウDOMはリンクタグに反応しません。実際には、リンクタグを使用するとChrome 41でエラーが発生します。私たちは、vulcanizeを使用してビルド時にCSSクラスをインライン化することによってその制限を回避しました。これはあなたのCSSとコンポーネント定義を分離するのに非常に便利であることが判明しました。