CSS Variable styling: using var(...) overrides a more specific selector

[doliver-pulsemining]

Setting Polymer elements CSS properties using CSS variables does not allow more specific CSS selectors to override the property unless they also are CSS variables.

The following code will result in all div elements being --red-color even when they have class='green'

<dom-module id='x-test'>
  <style>
    div {
      color: var(--red-color);
    }
    div.green {
      color: green;
    }
  </style>
  <template>
    <div class='green'>Green text is red</div>
  </template>
</dom-module>

Full example of issue: http://jsbin.com/xopovovema/edit?html,output

[sorvell]

This is a known issue and is something we plan to address soon. Closing this issue in favor of #1873.