聚合物深CSS

Question

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

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

index.html

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

或

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

我的酷-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 class 并在自定义元素中调用它

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

Answer 1

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

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

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

详情请见此处：https://www.polymer-project.org/0.5/articles/styling-elements.html#cat

聚合物深CSS

Polymer deep CSS

css

polymer