Shady DOM custom properties don't inherit.

[philipwalton]

Consider the following element:

<dom-module id="my-element">
  <style>
    :host {
      --color: red;
    }
    div {
      --color: green;
    }
    p {
      color: var(--color);
    }
  </style>
  <template>
    <div>
      <p>Some paragraph text...</p>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",

    // The custom properties shim is currently an opt-in feature
    enableCustomStyleProperties: true
  });
</script>

<my-element></my-element>

The text should be green but it's red instead.

[sorvell]

With native platform support for custom properties, this would work as described. Polymer's custom properties shim does not support this type of parent to child inheritance. Instead inheritance is only allowed between element local dom scopes.

The rule is that a property can have only 1 value applied to a given local dom scope. In this case, it's the value defined in :host.

Polymer's custom property shim is primarily designed to solve cross scope (element local dom) styling, and intra-scope inheritance is not required for that use case.