Shared publicly  - 
 
#webcomponents  

+Dominic Cooney landed [1][2] the CSS :unresolved pseudoclass last week in Chrome Canary.

Before a custom element is registered in the browser, it's an HTMLUnknownElement. "The :unresolved pseudoclass could be used to mitigate the Flash of Unstyled Content (FOUC) issues with custom elements."

Demo: http://jsbin.com/esufiv/3/edit (use Canary with the Enable Experimental WebKit features turned on in about:flags)

[1]: https://codereview.chromium.org/14846002/
[2]: crbug.com/237215
10
1
Web Components's profile photoEric Bidelman's profile photoSeth Ladd's profile photoChris Weber's profile photo
7 comments
 
guess I don't have that version of Canary yet.  Doesn't work for  28.0.1499.0.  Do I need to turn on any experiments for this?
 
"Enable Experimental WebKit features turned on in about:flags"
 
What approach would offer the best mitigation? How can adding styles to unstyled content be effective? What about excessive repaints?
 
+John Reading For example, you hide elements and fade them in with a smooth
transition after the elements have been upgraded:

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

This technique follows suite of what current frameworks like Angular do. Angular has ng-cloak [1] for this same purpose and hides unparsed templates until they're ready.

http://docs.angularjs.org/api/ng.directive:ngCloak
 
I see this in Chrome 31: Invalid CSS selector pseudoclass: unresolved
Add a comment...