我在我的网页中使用了 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
最佳答案
您应该调查 DOM(F12 或上下文菜单检查元素)。实际对话框的 HTML 添加到不在 <paper-action-dialog>
内的 body 标签的某处。 .您必须相应地调整选择器。
关于html - 来自外部的 Shadow DOM CSS 样式在 Google Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27178469/