<base href="//polygit2.appspot.com/polymer+^1.9.1/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-input/paper-input.html">

<dom-module id="my-element">
  <template>
    <style>
      #input {
        --primary-text-color: red;
      }
      
      #input.green {
        --primary-text-color: green;
      }
    </style>
    <paper-checkbox checked={{checked}}></paper-checkbox>
    <paper-input id='input' value='foo' class$='[[_getClasses(checked)]]'></paper-input>
  </template>
  <script>
    Polymer({
      is: "my-element",
      properties: { checked: Boolean },
      _getClasses: function(checked) {
        this.async(function() {
          this.$.input.updateStyles();
        });
        return checked ? '':'green';
      }
    });
  </script>
</dom-module>

<my-element></my-element>