本文介绍了Shadow DOM CSS外观样式在Google Chrome中无法使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用聚合物纸张操作对话框纸张按钮在我的网页。在纸张操作对话框中有两个纸按钮。我想从外面(主要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中无法使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 20:43