docs: prevent flash of unstyled content (FOUC)

[Leho Kraav]

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?

[Serhii Kulykov]

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>.

[Serhii Kulykov]

Closing per above comment.