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

Question

我在我的网页中使用了 polymer 的 paper-action-dialog 和 paper-button。 paper-action-dialog 中有两个 paper-buttons。我想从外部(主要 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

Answer 1

您应该调查 DOM(F12 或上下文菜单检查元素)。实际对话框的 HTML 添加到不在 <paper-action-dialog> 内的 body 标签的某处。 .您必须相应地调整选择器。