0

I am using polymer v1.9.1 and testing on Chrome.

I have a custom element containing a <paper-input>, and I want its text color to depend on some other property. This color is determined by the custom properties --paper-input-container-input-color or --primary-text-color, so I set a class-dependent value for those:

#input { --primary-text-color: red; }
#input.green { --primary-text-color: green; }

<paper-input id='input' class$='[[_getClasses(checked)]]'></paper-input>

_getClasses: function(checked) { return checked ? '':'green'; }

The text is always red, I guess because of this limitation in the shim (which I guess my browser must be using). So I add a call to updateStyles:

_getClasses: function(checked) {
  this.async(function() {
    this.$.input.updateStyles();
  });
  return checked ? '':'green'; }
}

Now it works correctly after checked first changes, but the initial state is incorrect (ie if checked is initially false, it is initially red but should be green). I tried adding another async(updateStyles()) to ready but no luck (yet if I call input.updateStyles() from the javascript console it corrects itself). How can I work around this?

Complete example: http://embed.plnkr.co/VC1ZMw9iyUO3K2SQq5Oy/

stewbasic
  • 831
  • 7
  • 21

1 Answers1

0

I've updated the plunk with the fix. I've updated styles in attached callback instead of ready.

_getClasses: function(checked) {
    return checked ? '' : 'green';
  },
  attached: function() {
    this.updateStyles();
  }
a1626
  • 2,953
  • 1
  • 19
  • 34
  • btw it doesn't work for me unless I keep updateStyles in _getClasses too (I guess it's browser dependent :/). But with calls from both _getClasses and attached it works as expected, thanks! – stewbasic May 31 '17 at 21:48
  • Oh right ! That's probably because when you change by checking/unchecking the checkbox we need to trigger `updateStyles` again. – a1626 Jun 01 '17 at 05:05
  • Help me with this https://stackoverflow.com/questions/44566067/data-binding-between-parent-child-in-polymer1-0/44568308#44568308 – Mr_Perfect Jun 16 '17 at 08:37