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

Question

I have a dynamically Polymer 2.0 application, but it doesn't seem to work with @apply .

I have CSS variables and 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>

Then I have themes that users can select and apply:

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

Polymer.updateStyles(theme);

The problem is that only the direct variables update, those set with @apply don't. class="content-one" works, class class="content-two" fails.

What am I doing wrong and how do I dynamically change the styles of mixins?

Answer 1

Polymer still seems to be using same polyfill for variables and mixins that they were using in 1.x, which means dynamic style updating should only be limited to variables and should not work for mixins.

One way you can achieve dynamic styling is by adding and removing classes.