Lit-element: On IE11 including styles with css custom properties breaks all styling

[sorvell]

NOTE, this occurs on any browsers that require ShadyCSS's css custom properties shim. This is currently only IE11 or older browser versions.

This is a limitation of lit-html's shady-render module. There is somewhat of a workaround, but it will only work correctly if the element has a style elements in one lit-html template, you will not be able to share styles in template parts with this workaround.

connectedCallback() {
  super.connectedCallback();
  if window.ShadyCSS) {
    window.ShadyCSS.styleElement(this);
  }
}

[igrigorik]

Same rendering issue when testing with Google's mobile friendly / rich results testing tools: https://twitter.com/igrigorik/status/994278130394124289 — those are powered by Blink M41.

Would love to see a fix for this!

[smalluban]

It will be fixed with https://github.com/Polymer/lit-html/pull/337

[sorvell]

Closing in favor of https://github.com/Polymer/lit-html/issues/326 which should be handled by https://github.com/Polymer/lit-html/pull/337 as noted above.