css - polymer 深度 CSS

Question

我正在构建一个包含大量自定义元素的 Polymer 单页界面。

现在我希望我的元素具有某种主样式，我可以在 index.html 或我的主要内容元素中定义它。可以这样想:

index.html

<style>
    .classWhichWillBeUsedInCustomElements {
        mainColor: #e0e0e0;
    }
</style>

或

<script>
    mainColor = "#e0e0e0";
</script>

my-cool-element.html

<polymer-element name="my-cool-element">
    <template>
        <paper-button style="color: {{mainColor}}"></paper-button>
    </template>
</polymer-element>

或

<polymer-element name="my-cool-element">
    <template>
        <style>
            .coolButton {
                width: 300px;
                color: {{mainColor}};
            }
        </style>
        <paper-button class="coolButton"></paper-button>
    </template>
</polymer-element>

除了这行不通。

我试过:

• 创建全局变量 window.defaultColor 并像 color: {{defaultColor}}; 一样使用它
• 在父元素中使用 core-style，运气不佳
• 在我的 index.html 中创建一个 css 类并在自定义元素中调用它

实现这一目标的正确方法是什么？我试图避免使用 Less

Answer 1

在 index.html 或全局样式表中使用以下模式:

<style>
    body /deep/ .classWhichWillBeUsedInCustomElements {
        mainColor: #e0e0e0;
    }
</style>

然后您可以在自定义元素中使用该类。全局样式会冲出阴影边界。您可以将 body 替换为您想要在其下打出影子 dom 边界的任何其他元素或选择器。

更多详情请点击此处:https://www.polymer-project.org/0.5/articles/styling-elements.html#cat