Shadow 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

我明白，後影響和/深/選擇器這個問題可能不再有效，但如果你仍然面臨這個問題，那麼我建議你使用css @imports注入你的常見重置.css在影子根模板中。

由於它必須是模板內的第一個標籤，因此您的內聯樣式表將優先於reset.css，其中適用。

如果您不想爲每個模板自行重複一次，我已經在相同主題和here處編寫answer以在運行時注入這些@import。可能它會爲你工作。