search

butopen / web-components-tailwind-starter-kit

How to develop a web component using tailwind - a modern starter kit with vite, lit element, typescript, scss and of course tailwind
MIT License
104 stars 15 forks source link

Flash of unstyled content #3

Open theperiscope opened 12 months ago

theperiscope commented 12 months ago

First time user of the starter kit. I noticed when launching the dev server with pnpm dev that in the browser (latest Firefox) there was a FOUC (flash of unstyled content) where plain text was replaced with the actual styles after a short amount of time.

I am aware of Twind, which works on solving a similar problem with web components and Tailwind. TWind uses a hidden attribute on the html tag which gets removed when DOMContentLoaded event fires.

Do you have any recommendations on how the FOUC can be prevented? Something simialr to TWind perhaps?

salvatoreromeo commented 11 months ago

look here: https://lit.dev/docs/components/styles/#:~:text=External%20styles%20can%20cause%20a,when%20building%20a%20reusable%20element.

it seems to be expected with external stylesheet.
One "hacky" solution could be to use opacity, for example as described here: https://stackoverflow.com/questions/62683430/how-to-stop-fouc-from-happening-with-native-web-components

ps: sorry, I don't know Twind

raymondboswel commented 11 months ago

@theperiscope I've previously solved this in SolidElement by inserting a tag that references the generated css file (configure your bundler to generate a manifest file). The content is only displayed once the onload of the tag fires. You also have to make sure that you set the correct cache headers on the css file so that it's cached by the browser. I'm not sure how well this approach scales if you have a ton of components all pulling in the stylesheet, but unless you switch off shadow dom, I don't think there's really an alternative.

theperiscope commented 11 months ago

Thank you @raymondboswel and @salvatoreromeo . Web components are a different paradigm than the typical React/Vue components and takes some getting used to to the benefiits and limitations. Your feedback is very useful and helps my futher exploration.