Verwenden von Polymer.updateStyles mit @apply mixin

Question

Ich habe eine dynamische Polymer 2.0-Anwendung, aber es scheint nicht mit @apply zu arbeiten.

Ich habe CSS Variablen und 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> 

Dann habe ich Themen, die Benutzer auswählen und anwenden können:

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

Polymer.updateStyles(theme); 

Das Problem ist, dass nur die direkte Variablen Update durch diejenigen, die mit @apply nicht. class="content-one" funktioniert, Klasse class="content-two" schlägt fehl.

Was mache ich falsch und wie ändere ich die Styles von Mixins dynamisch?

Answer 1

Polymer scheint immer noch die gleichen Polyfill für Variablen und Mixins zu verwenden, die sie in 1.x verwendet haben, was bedeutet, dynamische Aktualisierung sollte nur auf Variablen beschränkt sein und sollte nicht für Mixins funktionieren.

Eine Möglichkeit zum dynamischen Stylen besteht darin, Klassen hinzuzufügen und zu entfernen.