テンプレートスタイルを外部にすることはできますか?
-
21-12-2019 - |
質問
Google Polymer Resson 1 インラインスタイルシートを含む例。
CSSファイルに移動したいが、スタイルはテンプレートタグ内にあります。
問題を悪化させるために、それはを言う
シャドウDOMツリー内で使用される:ホスト疑似クラスが一致する ツリーをホストする要素。この場合、それはと一致します 要素
Q:このスタイルをCSSファイルに移動できますか?
解決
カスタム要素の一部である要素をシャドウDOMにスタイル化したい場合は、Shadow DOMの中にあるレベルの深さの数を奥行きにしたい場合は、::shadow
Selectorまたは/deep/
Selectorを使用する必要があります。
それで、外部から、p
のシャドウDOMのようなx-foo
要素をスタイルすることです。
x-foo::shadow p {
}
.
ここでのすべてのものについて読むことができます。 http://www.polymer-project.org/articles/styling-elements.html
他のヒント
このページ(または単に)をダウンロードした場合リストされている内容を見てください)、外部CSSファイルを使用することがわかります。要素HTMLを調べて、使用方法を確認できますが、非常に単純です。
<polymer-element name="seed-element" attributes="notitle author">
<template>
<link rel="stylesheet" href="seed-element.css" />
<h1>Hello from seed-element</h1>
<content></content>
</template>
<script>
Polymer('seed-element', {
//...
}
</script>
</polymer-element>
.
その後、seed-element.cssではデフォルトで次のものがあります。
:host {
display: block;
}
.
それを理解する方法(私の限られた知識で)seed要素の名前をmy要素に変更しようとした場合、これは
と同じでしょう。my-element {
display: block;
}
. 所属していません StackOverflow