Изменение стиля программно

Question

Я пытаюсь следовать документам Custom property API for Polymer elements относительно обновления свойств CSS элемента (и стилей) программным способом, но, похоже, не может заставить его работать. Вот моя текущая попытка:

<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> 

<dom-module id="my-namecard"> 
    <style> 
    :host { 
     --color: green; 
    } 

    span { 
     color: var(--color, orange); 
    } 
    </style> 

    <template> 
    <div> 
     Hi! My name is <span>{{name}}</span> 
    </div> 
    <button on-click="redClick">Set text to Red</button> 
    <button on-click="blueClick">Set text to Blue</button> 
    </template> 

    <script> 
    Polymer({ 
     is: 'my-namecard', 
     properties: { 
     name: { 
      type: String 
     } 
     }, 
     redClick: function() { 
     console.log('Setting "--color" red'); 
     this.customStyle['--color'] = 'red'; 
     this.updateStyles(); 
     }, 
     blueClick: function() { 
     console.log('Setting "--color" blue'); 
     this.customStyle['--color'] = 'blue'; 
     this.updateStyles(); 
     } 
    }); 
    </script> 
</dom-module> 

<my-namecard name="Sean"></my-namecard> 

Я также попытался не устанавливая свойство CSS и используя прямой стиль, такие как:

redClick: function() { 
    console.log('Setting "color" red'); 
    this.customStyle['color'] = 'red'; 
    this.updateStyles(); 
} 

Я создал codepen демонстрирует этот вопрос

Answer 1

Вы попали в ошибку в текущей версии Polymer, где изменение стиля, подобное этому, будет распространяться на дочерние элементы Polymer, но не на сам элемент. См:

https://github.com/Polymer/polymer/issues/1851

Обойти это вызов Polymer.updateStyles() вместо this.updateStyles().

Обновлено codepen.