阴影 DOM 重置样式表

Question

我希望我制作的应用程序在全球范围内使用 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。我不想在每个自定义元素中都重复自己。我想我可以为每个 <template> 添加一个 <link>，但我会再次重复自己。我也可以让 JavaScript 注入 <link> 但我不确定这是最好的方法。

还有哪些其他方法可以使用 reset.css 穿透阴影根但特异性非常低？

Answer 1

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

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

我写了一个 answer here on same topic and one here 来在运行时注入那些 @imports 如果你不想自己为每个模板重复它。也许它会为你解决。

阴影 DOM 重置样式表

Shadow DOM reset stylesheet

css

web-component

shadow-dom

css-reset

custom-element