Allow explicit inheritance when re-defining a custom property set

[bendavis78]

See here for the origin of this issue in Polymer: Polymer/polymer#2487

I'm curious of whether or not the spec defines what happens in this case:

:host {
  --paper-dropdown-menu-icon: {
    @apply(--paper-dropdown-menu-icon);
    padding-right: 12px;
  }
}

The idea here is that the author of a custom web component should be able to extend an existing property set (for example, from a commonly-used theme) without wiping out the properties in the previously defined property set. In the above example, the inner @apply would just apply whatever properties were previously defined as part of that set.

Right now Polymer doesn't handle the above syntax well; it results in a recursive loop. Has this usage been considred in the spec?

[tabatkins]

Spec hasn't been updated yet to reflect this, but I'm going to expand @apply inside of custom properties, too, identically to how var() works today. This means your example would be an loop, and would invalidate the property.

This'll be fixed with the ability to refer to the value of a custom property from your parent, in both var() and @apply, because "building up" a value as you descend the tree is definitely useful; right now you have to do tricky hacks to make it work.

(In general, if something works a certain way with var(), it'll work the same way with @apply.)

[nazar-pc]

@tabatkins, can you ping us at Polymer/polymer#2487 when done so that we would be able to implement it quickly in Polymer?