Shadow DOM CSS外观样式在Google Chrome中无法使用 [英] Shadow DOM CSS Styling from outside is not working in 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（ F12 。实际对话框的HTML被添加到不在< paper-action-dialog> 中的body标签的某处。您必须相应地调整选择器。

You should investigate the DOM (F12 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中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！