根据https://developers.google.com/web/fundamentals/web-components/shadowdom#stylefromoutside：
外部样式始终胜过影子DOM中定义的样式。对于
例如，如果用户编写了选择器fancy-tabs {width：500px; }，
它将胜过组件的规则：：host {width：650px;}。
在我的示例中，这似乎不起作用。我已经设置了一个应用程序覆盖组件。在内部，我有一个.child类的div。根据以上来源，我希望孩子在全局范围内设置填充：
app-overlay .child {
padding: 0 25%;
}
在此处查看完整示例：http://plnkr.co/edit/YQOmtxSA9AThCcNmrEJc?p=preview
请注意，设置为全局填充的填充不会应用于应用程序覆盖子对象（尽管它应该赢得组件的样式）。
我缺少任何步骤吗？
最佳答案
好的，这很容易混淆，所以我把它放在这里，以防万一有人撞到它。
通过全局作用域样式进行的覆盖仅适用于可继承的CSS属性。
如果要设置一些不可继承的属性（例如padding-请参见完整列表here）。
因此，我猜想对非继承属性执行此操作的唯一方法是通过模板注入CSS（例如调用文件）或通过CSS变量。
关于javascript - 全局样式不会覆盖阴影dom样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52351835/