How to update class based static styles property?

[philkunz]

Is there a way to update the class scoped static styles property and force a rerendering of already created instances without going the instance scoped template <style> approach ?

Also: What is the performance hit when using instance scoped template <style> tags when not changing any properties used in there?

For reference: I implemented a light/dark switch based on a instance.goBright property (see https://lossless.com) and I am wondering if there is a way to switch between light/dark using a boolean (and not css variables) in conjunction with static class scoped styles.

[sorvell]

There's no built in way of doing this. We discourage it because there's a performance benefit on Chrome to keeping element styles stable and the ShadyCSS polyfill supports only a single set of styles per element type.

The easiest and highest performance way to deal with this is to use css custom properties and set a class that alters these values on the document. It would be good to understand why this doesn't fit your use case. Is it because you have a suite of styles that don't currently use custom properties?

You certainly can render style elements inside your element template and control their rendering based on some setting. There's a minor performance hit (on Chrome only) to doing this v. using static styles. The other issue with this approach is it won't be supported on browsers that require polyfilled Shadow DOM (IE11).

It's possible to optimize the performance if desired on Chrome by saving dark/light stylesheets and setting shadowRoot.adoptedStylesheets directly.

Hope that helps.

[sorvell]

Closing based on #1116 (comment). Please feel free to reopen the issue if more discussion is needed.