全局樣式不會覆蓋陰影dom樣式

Question

根據https://developers.google.com/web/fundamentals/web-components/shadowdom#stylefromoutside ：

外部樣式始終勝過影子DOM中定義的樣式。 例如，如果用戶編寫了選擇器fancy-tabs {width：500px; }，它將勝過組件的規則：：hos​​t {width：650px;}。

在我的示例中，這似乎不起作用。 我已經設置了一個應用程序覆蓋組件。 在內部，我有一個.child類的div。 根據以上來源，我希望孩子在全局范圍內設置填充：

app-overlay .child {
  padding: 0 25%;
}

在此處查看完整示例： http : //plnkr.co/edit/YQOmtxSA9AThCcNmrEJc?p=preview

請注意，設置為全局填充的填充不會應用於應用程序覆蓋子對象（盡管它應該贏得組件的樣式）。

我缺少任何步驟嗎？

Answer 1

好的，這很容易混淆，所以我把它放在這里，以防萬一有人撞到它。

通過全局作用域樣式進行的覆蓋僅適用於可繼承的CSS屬性。 如果您想設置一些不可繼承的屬性（例如padding-參見此處的完整列表）。

因此，我猜想對非繼承屬性執行此操作的唯一方法是通過模板（例如，調用文件）注入CSS或通過CSS變量。