Shadow DOM CSS来自外部的样式在Google Chrome中无效

Question

我在我的网页上使用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

Answer 1

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