leverage Lit's styles API for component styles

[thescientist13]

Overview

As observed in ProjectEvergreen/greenwood#752 (comment), noticed that with Lit 2.0 had some unexpected behaviors when pre-rendering components that used expressions inside a render method, ex.

import someCss from './some.css';

.
.

  render() {
    return html`
      <style>
       ${someCss}
      </style>
      
      ...  
  `;
}

For the pre-rendering use case, it looked like Lit was omitting the wrapping <style> tags leaving just the CSS as plain text / HTML, which is visible on the page briefly until JS / Shadow DOM kicks in.

Proposal

For any component that follows the above pattern, I suggest adopting this pattern instead when wanting to use CSS-in-JS approach

import someCss from './some.css';

.
.

  get styles() {
    return css`
      ${unsafeCSS(someCss)}
    `;
  }

---

The Lit docs do a good job covering the ins and outs of using CSS with Lit, let's chat more on the next Greenwood call!

[thescientist13]

Or maybe just use this.styles directly instead of this.style? (or just call the attribute styles and reflect that onto the property?)