Search code examples
csspolymerpolymer-1.0css-variables

New way to write CSS variable defaults in Polymer

Why has the Polymer team changed the way they define default CSS variable values in Polymer elements? Below is an example:

Old style

color: var(--my-value,--default-value);

New style

color: var(--my-value,var(--default-value));

Are there any new specs for custom CSS variables? Does it have any advantage? Or is it some other reason altogether?

Solution

  • The "old style" from Polymer 1.x (i.e., var(--a, --b)), while succinct, is technically invalid according to the CSS variables spec.

    The Polymer 2.0-preview notes indicate the motivation to properly conform with the spec is to support native CSS properties:

    The following invalid styling syntax was previously accepted by the 1.0 custom property shim. In order to support native CSS Custom Properties, rules should be correct to use only natively valid syntax:

    • ...
    • var(--a, --b)
      • Should be var(--a, var(--b))