2

私が作成しているアプリをreset.cssグローバル レベルで使用したいと考えています。また、すべてのシャドウ ルートに浸透するが、特異性が低いことも望んでいます。どうすればこれを達成できますか?

my に次のようなものが含まれているとしましょうreset.css:

li, ::shadow li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

次に、カスタム要素には次のようなテンプレートがあります。

<template>
    <style>
        li {
            padding: 10px;
        }
    <style>
    <ol>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
    </ol>
</template>

私の問題は、テンプレートのliセレクターに打ち負かすのに十分な特異性がないこと::shadow liです。すべてのカスタム要素で自分自身を繰り返す必要はありません。<link>それぞれに a を追加できると思います<template>が、もう一度繰り返します。JavaScript を挿入することもできますが、<link>それが最善の方法かどうかはわかりません。

reset.cssシャドウ ルートを貫通するが、特異性がほとんどないa を使用できる他の方法は何ですか?

4

1 に答える 1

0

::shadow および /deep/ セレクターの廃止後、この質問はもはや有効ではない可能性があることを理解していますが、まだこの問題に直面している場合は、css @imports を使用して共通の reset.css をシャドウに挿入することをお勧めします。 -ルート テンプレート。

テンプレート内の最初のタグでなければならないため、インライン スタイルシートは、該当する場合は reset.css よりも優先されます。

同じトピックについてここに回答を書きました。テンプレートごとに自分で繰り返したくない場合は、実行時にこれらの @imports を挿入するためにここに回答を書きました。おそらくそれはあなたのためにうまくいくでしょう。

于 2015-10-06T19:22:29.087 に答える