Custom properties defined on :host shouldn't override document styles.

[philipwalton]

According to the spec, rules from outside a shadow tree always win against rules within a shadow tree, when they attempt to style the same element:
http://dev.w3.org/csswg/css-scoping/#cascading

It seems that Shady DOM correctly handles this with regular properties, but not with custom properties. Consider the following example:

<dom-module id="my-element">
  <style>
    :host {
      --color: red;
      color: var(--color);
      background: yellow;
    }
  </style>
  <template>
    content...
  </template>
</dom-module>

With the following external styles defined:

<style is="custom-style">
  my-element {
    --color: blue;
    background: pink;
  }
</style>

The result should be blue text with a pink background since document style should win here; instead, I see red text with a pink background.

That means Polymer is correctly determining that the outside background:pink property should win, but incorrectly not doing the same with the outside --color:blue custom property.