外部样式不覆盖 Shadow DOM 样式答案

【问题标题】：Outside styles not overriding Shadow DOM styles外部样式不覆盖 Shadow DOM 样式
【发布时间】：2018-10-14 15:19:48
【问题描述】：

我正在尝试设置 <app-drawer> component 的样式并为其设置背景色。在其文档中，app-drawer 提供了一个custom variable available 来影响应用抽屉内容容器 (#contentContainer)。

app-drawer {
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.5);
        --app-drawer-content-container: {
            background-color: orange !important;
        };
    }

这些样式会处理，但不会覆盖native component styles。 Here's what comes up for me in the browser。

Outside styles always win over styles defined in shadow DOM - 谷歌开发者

我正在从所有者文档中导入元素。

<!--index.html-->
<link rel="import" href="../bower_components/app-layout/app-layout.html">

<style>
    app-drawer {
        ...
    }
    ...
</style>
<app-drawer-layout>
    <app-drawer slot="drawer">
        <app-toolbar>Main Title</app-toolbar>
    </app-drawer>
</app-drawer-layout>

谁能弄清楚这里发生了什么？

【问题讨论】：

标签： css polymer components web-component shadow-dom

【解决方案1】：

尝试将box-shadow 放入--app-drawer-content-container。这对我有用：

app-drawer {
  z-index: 3;
  --app-drawer-content-container: {
    box-shadow: 1px 0 2px 1px rgba(0,0,0,0.18);
    background-color: orange;
  }
}

【讨论】：

不。对我来说没有产生视觉上的差异。
在 DevTools 中是什么样子的？ app-drawer 中是否有覆盖整个区域的元素？抱歉，我没有更好的主意。如上所示，我的背景是橙色的，但我的按钮、标题等使用它们的设置。
app-drawer 有自己的影子根元素。里面有 div#scrim 创建透明的深色背景覆盖，另一个元素 div#contentContainer 保存内容。我可以内联样式 #contentContainer 并且背景颜色会发生变化。我还尝试了各种选择器组合，例如：app-drawer #contentContainer { ...styles here }
我在 v2 polymer-starter-kit 的 shadow-root 中看到了相同的内容。不在shadow-root 中，而是在app-drawer 本身的子代中，有一个app-toolbar 和一个iron-selector。只需将你的 CSS 添加到 my-app.html 的模板样式中，app-drawer 的背景是橙色的。 ¯_(ツ)_/¯
谢谢，@Thad。我用你的代码让它工作。在检查我的原始代码时，我没有使用 Polymer 规范定义我的自定义元素，即class MyClass extends Polymer.Element {}。我使用的是原始规范中概述的方法：developers.google.com/web/fundamentals/web-components/…。我相信这可能会以某种方式干扰。