this.updateStyles() sometimes fails

[Tony Mobily]

Hi,

I have a component like this (tiny, short and sweet):

--------------------------------

<link rel="import" href="/bower_components/polymer/polymer.html">

<dom-module id="my-app">

  <template>

    <style include="my-shared-styles">

      :host(.main-ent) {

        --primary-color: var(--paper-blue-600);

      }

      :host(.main-all) {

        --primary-color: var(--paper-purple-700);

      }

    </style>

    <an-element-using-primary-color></an-element-using-primary-color>

  </template>

  <script>

    Polymer({

      is: 'my-app',

      properties: {

        siteInfo: {

          type: Object,

          notify: true,

      },

      attached: function() {

        console.log("SITEINFO (SHORT):", this.siteInfo.short );

        this.classList.add('main-' + this.siteInfo.short);

        //this.async( function() {

          this.updateStyles();

        //});

      },

    });

  </script>

</dom-module>

The problem I am having is that without that `this.async()`, *sometimes* (say one time out of 8) this.updateStyles() doesn't seem to work: the primary colour stays "wrong".

I am not even 10000% sure the problem is solved with `this.async()`, or only mitigated.

So...

* What's the root of the problem?

* Does `this.async()` actually fix it?

* If not, what does?

Merc.