2

我希望我正在制作的应用程序可以reset.css在全球范围内使用。我也希望它能够穿透所有阴影根，但特异性较低。我怎样才能做到这一点？

假设我的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>为每个添加一个，<template>但我会再次重复自己。我也可以让 JavaScript 注入，<link>但我不确定这是最好的方法。

我可以使用哪些其他方法reset.css来穿透阴影根但特异性很小？

4

1 回答 1

0

我知道 ::shadow 和 /deep/ 选择器的弃用后这个问题可能不再有效，但如果你仍然面临这个问题，那么我建议你使用 css @imports 将你的常见 reset.css 注入阴影-根模板。

由于它必须是模板内的第一个标签，因此您的内联样式表将优先于 reset.css，只要适用。

如果您不想自己为每个模板重复它，我已经在同一主题上写了一个答案，并且在运行时注入这些@imports。可能它会为你解决。

于 2015-10-06T19:22:29.087 回答