从 Polymer 1.0 中的嵌套元素中删除样式范围

Question

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

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

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

我觉得我只是在文档中遗漏了一些东西，因为演示中没有这个类。

提前致谢！

Answer 1

这是Cross-scope styling，即您希望 CSS 规则“穿透 Shadow DOM 封装”的位置。

如果您想创建可重用的组件，那么您应该使用自定义 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>