将 Polymer.updateStyles 与 @apply mixin 一起使用答案

【问题标题】：Using Polymer.updateStyles with @apply mixin将 Polymer.updateStyles 与 @apply mixin 一起使用
【发布时间】：2017-10-25 06:28:20
【问题描述】：

我有一个动态 Polymer 2.0 应用程序，但它似乎不适用于 @apply。

我有 CSS 变量和 mixins：

<custom-style>
    <style>
        html {
            --content-background-colour: #fff;
            --content-foreground-colour: var(--paper-grey-700);

            --content-mixin: {
                background-color: var(--content-background-colour);
                color: var(--content-foreground-colour);
            }
        }

        .content-one {
            background-color: var(--content-background-colour);
            color: var(--content-foreground-colour);
        }

        .content-two {
            @apply --content-mixin
        }
    </style>
</custom-style>

然后我有用户可以选择和应用的主题：

const theme = {
    "--content-background-colour": "var(--paper-grey-800)",
    "--content-foreground-colour": "var(--paper-grey-100)"
};

Polymer.updateStyles(theme);

问题在于只有直接变量会更新，而使用@apply 设置的变量不会。 class="content-one" 有效，class="content-two" 课程失败。

我做错了什么以及如何动态更改 mixins 的样式？

【问题讨论】：

标签： polymer shadow-dom css-variables css-mixin

【解决方案1】：

Polymer 似乎仍然在为变量和 mixins 使用它们在 1.x 中使用的相同 polyfill，这意味着动态样式更新应该仅限于变量，并且不应该适用于 mixins。

实现动态样式的一种方法是添加和删除类。

【讨论】：