Question

我在网页中使用polymer＆＃39 {s} paper-action-dialog和paper-button。纸张对话框中有两个纸张按钮。我想从外面设置那些纸质按钮（主要的html）。我在CSS符号中编写了shadow DOM个样式。这些样式在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标签的某处。你必须相应地调整选择器。

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

1 个答案: