来自外部的 Shadow DOM CSS 样式在 Google Chrome 中不起作用答案

【问题标题】：Shadow DOM CSS Styling from outside is not working in Google Chrome来自外部的 Shadow DOM CSS 样式在 Google Chrome 中不起作用
【发布时间】：2015-01-26 12:16:40
【问题描述】：

我在我的网页中使用polymer 的paper-action-dialog 和paper-button。纸张动作对话框中有两个纸张按钮。我想从外部（主 html）设置这些纸质按钮的样式。我用shadow DOM 表示法写了CSS 样式。这些样式在 Firefox 浏览器中运行良好，但在 Google-chrome 浏览器中无法正常运行。我应该怎么做才能在 chrome 中完成这项工作？

标记

<paper-action-dialog class="ask" backdrop autoCloseDisabled=true heading="Heading!">
  <p>This is the sample paragraph.</p>
  <paper-button  autofocus class="test" affirmative>Edit</paper-button>
  <paper-button  autofocus class="test" affirmative>OK</paper-button>
</paper-action-dialog>

CSS

paper-action-dialog::shadow paper-button.test{
            font-size: small;
            height: 100%;
            padding-top: 5px;
            width: 100%;
            margin: 0 0;
}

编辑：

答案在于评论：

选择器应该是overlay-host::shadow paper-button.test

【问题讨论】：

标签： html css google-chrome polymer shadow-dom

【解决方案1】：

您应该调查 DOM（F12 或上下文菜单检查元素）。实际对话框的 HTML 被添加到 body 标记中的某个位置，而不是在 <paper-action-dialog> 内。您必须相应地调整选择器。

【讨论】：

我会对此进行调查。但那它怎么在 Firefox 中工作呢？我什至使用 cordova 将它部署到我的 android 设备上，它仍然可以正常工作。我也尝试过以一种在这里完成的方式访问元素 -polymer-project.org/components/paper-dialog/demo.html
因为 Firefox 没有影子 DOM。演示页面显示实际对话框已添加到<body><core-overlay-layer><overlay-host>#shadow<paper-dialog>。因为该元素在这里也被命名为<paper-dialog>，所以它也可以在 Firefox 中运行（没有作用域的 CSS）。如果您将 CSS 添加到您的 index.html 并将选择器更改为 * /deep/ paper-action-dialog::shadow paper-button.test 或 overlay-host::shadow paper-action-dialog::shadow paper-button.test 它可能也可以在 Chrome 中使用。我没有工作 paper-action-dialog 演示，我只是从 paper-dialog 演示中派生了上面的选择器。