[0.8] host-context improperly shimmed

[robdodson]

If I have an element named x-foo, using :host-context in an external stylesheet gets converted to x-foo-context

[sorvell]

:host-context is not supported in 0.8+. Instead you should use Polymer's custom properties shim for this type of cross-scope styling.

[robdodson]

@sorvell So what would that look like? I was trying to do something like this:

:host-context(.fancy)

[sorvell]

Something like this:

In the scope where you have .fancy:

<style>
  x-foo.fancy {
    --fancy: {
      color: red;
    }
  }
</style>

In the element (e.g x-foo)

:host {
  @apply(--fancy);
}

It's not exactly the same, but instead of the element having to anticipate exactly how it might be styled, it delegates this power, where appropriate, to the user.

Fwiw, we're not totally ruling out adding support for :host-context and will consider user feedback, but we'd like to encourage using properties for these use cases.