如何在陰影中使用全局CSS樣式

陰影dom封裝了CSS樣式，選擇器不會穿過陰影邊界。如何在陰影中使用全局CSS樣式

問題：如何在陰影中使用全局通用的CSS樣式？
（假設有一些常用的css風格將在所有頁面上使用（例如：font-family，h1，h2，clear，reset ...），如何使它在shadow dom中有效？）

2016-02-29 Jiubao

你通過:: shadow僞元素來做到這一點。像這樣：

::shadow .redColor 
{ 
    background-color: red;  
}

這將使用.redColor類對陰影樹中的所有元素應用樣式。

更多信息+其他造型的可能性這篇大文章中：Shadow DOM 201

來源

2016-02-29 19:53:55 Amid

::陰影已被棄用，在中。 – MarcG

我知道。但現在它可以工作，並且是我引用的文章中提到的其他解決方案中可行的解決方案。 – Amid

它會被完全刪除，所以我猜沒有人應該使用它。這篇文章當然是好的。 – MarcG

一些解決方案：

CSS變量：
:host-context： http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
另外，我沒有測試過，但有人建議@import url('/common-style.css');，在這裏：Polymer share styles across elements

請注意，上面列出的文章之一也指出了在一片。在撰寫文章時，Chrome沒有CSS變量。但現在它已經與最近推出的谷歌瀏覽器49本地生效。

來源

2016-03-06 23:22:44 MarcG

謝謝！所以CSS變量，：主機上下文，::影子（不推薦）是這個問題的答案。而這個問題的上下文是：當我嘗試使用angular2時，它會爲組件引入陰影DOM。我擔心的是，如果我們將整個頁面封裝到一個嵌套的影子DOM樹中，上面的東西可能不是解決共享css的問題，想象我們涉及引導程序，我們如何在影子DOM中使用它？ – Jiubao

如何在陰影中使用全局CSS樣式

回答

相關問題