docs: prevent flash of unstyled content (FOUC)
lkraav opened this issue · comments
https://developers.google.com/web/fundamentals/web-components/customelements#prestyle presents a solid strategy that works.
In reality, it seem like 2 rules are needed, for something like a layout component:
vaadin-app-layout:not(:defined) {
/* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */
display: block;
height: 100vh;
opacity: 0;
}
vaadin-app-layout:defined {
transition: opacity 0.1s ease-in-out;
}
Even though the example given is for vaadin-app-layout
, it's a generic web component upgrade issue, which I didn't know until I experienced it and researched. So wondering if we could add a Documentation note here about it, and present this solution option.
Any better options that you know of, @web-padawan?
I haven't seen any web component library providing this kind of docs. So I'm not sure if that's a good idea to add it here, at least at this point I would prefer to only document the library itself.
This approach would probably make sense if we were using "decorator" pattern (placing any button
and input
elements into the slots, and then forwarding the events). But there are some challenges here, e.g. it's not always possible to style the ::placeholder
for slotted <input>
.
Closing per above comment.