logo标签列表

谷歌浏览器中，从外部进行的Shadow DOM CSS样式设置无法生效。

htmlcssgoogle-chromepolymershadow-dom
3
我将使用polymer的paper-action-dialog和paper-button在我的网页中。在paper-action-dialog中有两个paper-buttons。我想从外部（主HTML）样式这些paper-buttons。我已经用影子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

1个回答
2

您应该调查DOM（F12或上下文菜单检查元素）。实际对话框的HTML被添加到body标签中而不是<paper-action-dialog>内。您必须相应地调整选择器。

我会调查这个问题。但是为什么在Firefox中它可以工作呢？我甚至使用Cordova将其部署到我的Android设备上，它仍然可以工作。我还尝试以这里所做的方式访问元素-http://www.polymer-project.org/components/paper-dialog/demo.html - Heisenberg
2
因为Firefox没有阴影DOM。演示页面显示实际对话框添加到<body><core-overlay-layer><overlay-host>#shadow<paper-dialog>。由于此处的元素也被命名为<paper-dialog>，因此它在Firefox中可以工作（没有作用域CSS）。如果您将CSS添加到index.html并将选择器更改为* /deep/ paper-action-dialog::shadow paper-button.test或overlay-host::shadow paper-action-dialog::shadow paper-button.test，它可能也会在Chrome中起作用。我没有可行的paper-action-dialog演示，我只是从paper-dialog演示中推导出上面的选择器。 - Günter Zöchbauer
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接