Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Handle FOUC - :defined? #11

Closed
lkraav opened this issue Apr 26, 2019 · 6 comments
Closed

Handle FOUC - :defined? #11

lkraav opened this issue Apr 26, 2019 · 6 comments

Comments

@lkraav
Copy link

lkraav commented Apr 26, 2019

Custom elements take time to get upgraded, which means we might see a flash of unstyled content.

https://developers.google.com/web/fundamentals/web-components/customelements#prestyle

Before an element is upgraded you can target it in CSS using the :defined pseudo-class. This is useful for pre-styling a component. For example, you may wish to prevent layout or other visual FOUC by hiding undefined components and fading them in when they become defined.

@chanar thoughts?
@chanar
Copy link

chanar commented Apr 27, 2019

There is option to use unresolved on body tag. <body unresolved>

This will smooth load the view but it means a small (currently half a second) wait until view is rendered. Webpack has option to load js "when needed" so when this first (unresolved) option becomes too bearing, we could try that option.

@lkraav
Copy link
Author

lkraav commented Apr 27, 2019

I guess we will see how the loading experience will be on WP, soon. Further decisions to be made then.

@lkraav
Copy link
Author

lkraav commented May 14, 2019

Tested, this works exactly as per Google docs and desired:

cxl-institute-layout:not(:defined) {
	/* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */
	display: block;
	height: 100vh;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

@chanar can layout component get this, or needs to be part of app-level CSS?

@chanar
Copy link

chanar commented May 14, 2019

if :not(:defined) works the same then why did they introduce it in webcomponents. Don't know what's right, can go with :defined

https://www.html5rocks.com/en/tutorials/webcomponents/customelements/#fouc

  x-foo {
    opacity: 1;
    transition: opacity 300ms;
  }
  x-foo:unresolved {
    opacity: 0;
  }

Different view on subject https://gist.github.com/ebidel/1ba71473d687d0567bd3

@lkraav
Copy link
Author

lkraav commented May 14, 2019

WICG/webcomponents#418 makes it clear: :defined is the official spec, and works CSS-only.

@lkraav lkraav closed this as completed May 14, 2019
@lkraav
Copy link
Author

lkraav commented Jan 4, 2020

It turns out <body unresolved> is still useful, esp. on iterations without dedicated layout components in place.

Ref: https://github.com/Polymer/polymer/blob/v3.3.1/lib/utils/unresolved.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lkraav @chanar