[0.8][styling] Want to define custom variables in the same scope as their references

I want to give a custom element a default color from the shared theme while allowing a hook for the user to customize the color by doing this:

* {
  --my-element-background-color: var(--my-theme-background-color);
}

:host {
  background-color: var(--my-element-background-color);
}

It seems like the variable definition must be in a different scope than the reference to the variable.

Variables now support default values via syntax like this:

background-color: var(--my-element-background-color, --my-element-default-background-color);

In addition properties can be defined in the scope that they are used via :host or :root.

Navigation Menu