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!
Overview
As observed in https://github.com/ProjectEvergreen/greenwood/issues/752#issuecomment-937853965, noticed that with Lit 2.0 had some unexpected behaviors when pre-rendering components that used expressions inside a render method, ex.
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