Polymer - Пользовательский элемент задает класс CSS в готовом обратном вызове?

Question

Я пытаюсь научиться использовать Полимер и веб-компоненты, и у меня есть эта проблема, и я не могу найти никаких решений.

Я разрабатываю свой собственный веб-компонент, но я не знаю, как динамически устанавливать определенный класс.

Вот так я называю мой компонент

<custom-toogle label="my label" class="blue" checked></custom-toogle> 

Вот мой веб-компонент

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html"> 

<dom-module id="custom-toogle"> 

<style> 
    label { 
     display: block; 
     font-weight: bold; 
     color: #333; 
    } 

    paper-toggle-button.blue { 
     --paper-toggle-button-checked-bar-color: #B3E5FC; 
     --paper-toggle-button-checked-button-color: #0288D1; 
     --paper-toggle-button-unchecked-bar-color: #B6B6B6; 
     --paper-toggle-button-unchecked-button-color: #727272; 
    } 
</style> 

<template> 
    <label>{{label}}</label> 
    <paper-toggle-button id="toggleButton"></paper-toggle-button> 
</template> 

<script> 
Polymer({ 
    is: "custom-toogle", 
    properties: { 
     label: { 
      type: String, 
      value: null 
     }, 
     checked: { 
      type: Boolean, 
      value: false 
     }, 
     class: { 
      type: String, 
      value: 'blue' 
     } 
    }, 
    ready: function(){ 
     var e = document.getElementById("toggleButton"); 

     if(this.checked) { 
      e.checked = true; 
     } 

     e.className += e.className + " " + this.class; 

    } 
}); 
} 
</script> 
</dom-module> 

Когда я делаю это, синий класс не применяется, но если я делаю console.log (e.classList) «синий» класс IS в списке.

Я также попытался сделать это в моем элементе

<paper-toggle-button id="toggleButton" class="{{class}}"></paper-toggle-button> 

Это не работает.

Как я могу установить класс динамически?

Спасибо!

Answer 1

Чтобы получить идентификатор элемента внутри полимерного элемента, используйте this.$.elementId. Попробуйте это:

var e = this.$.toggleButton; 

Answer 2

Чтобы изменить класс, вам нужно использовать вместо класса $ класса

<paper-toggle-button id="toggleButton" class$="{{class}}"></paper-toggle-button> 

Я нашел это в документ здесь: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html