Open theperiscope opened 12 months ago
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
@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.
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.
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 whenDOMContentLoaded
event fires.Do you have any recommendations on how the FOUC can be prevented? Something simialr to TWind perhaps?