Question

我正在尝试在纸张对话框中添加纸质按钮元素，但样式不会被拾取，因为它会不断向所有对话框的子元素添加style-scope类。它似乎对所有元素/自定义元素以及所有类（不仅仅是style-scope）执行此操作。

问题是所有样式似乎都使用下面的选择器，因此实际样式没有正确表示。

:not([style-scope]):not(.style-scope)

我有一种感觉，我只是遗漏了文档中的内容，因为演示中没有这个类。

提前致谢！

Answer 1

这是Cross-scope styling，即你希望CSS规则穿透Shadow DOM封装＆＃34;。

如果要创建可重用组件，则应使用自定义CSS属性仅公开可更改的规则。如果您正在为自己使用组件，那么外部样式表是一种更简单的方法：

<dom-module id="my-awesome-button">
    <!-- special import with type=css used to load remote CSS -->
    <link rel="import" type="css" href="my-awesome-button.css">

我建议你阅读我所链接的文档，因为很难给出一个很好的总结，因为有几种不同的方法，每种方法各有利弊。

Answer 2

我有类似的问题。请在您的自定义元素中使用此代码。

<script>
    (function () {
        Polymer({
            is: 'custom-element',                
            attached: function() {
               this.async(function() {
                  $('paper-button').removeClass('style-scope');
               });
            }
        });
    })();
</script>

从Polymer 1.0

2 个答案: