问题描述
我使用聚合物
的纸张操作对话框
和纸张按钮
在我的网页。在纸张操作对话框中有两个纸按钮。我想从外面(主要html)样式那些纸按钮。我在 shadow DOM
符号中写了 CSS
样式。这些样式在Firefox浏览器中正常工作,但在 Google-chrome
浏览器中无法正常工作。
I am using polymer
's paper-action-dialog
and paper-button
in my web page. There are two paper-buttons in a paper-action-dialog. I want to style those paper-buttons from outside (main html). I have written CSS
styles in shadow DOM
notation. These styles are working fine in Firefox browser but not behaving correctly in Google-chrome
browser. What should I do in order to get that work in 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;
}
EDIT :
答案在于注释:
选择器应该是 overlay-host :: shadow paper-button.test
Selector should be overlay-host::shadow paper-button.test
推荐答案
您应该调查DOM( 。实际对话框的HTML被添加到不在< paper-action-dialog>
中的body标签的某处。您必须相应地调整选择器。
You should investigate the DOM ( or context menu inspect element). The HTML for the actual dialog is added somewhere to the body tag not within the <paper-action-dialog>
. You have to adapt the selectors accordingly.
这篇关于Shadow DOM CSS外观样式在Google Chrome中无法使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!