<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>