Unresolved attribute available as a feature of platform. With native …

…imports, this should be able to be removed. It’s needed because HTMLImports does not properly polyfill loading imports before paint.

build.json

@@ -12,6 +12,7 @@
   "src/dom.js",
   "src/template.js",
   "src/inspector.js",
+  "src/unresolved.js",
   "../polymer-expressions/build.json",
   "src/patches-mdv.js",
   "../HTMLImports/build.json",

platform.js

@@ -39,7 +39,8 @@ function processFlags(flags) {
       'src/lang.js',
       'src/dom.js',
       'src/template.js',
-      'src/inspector.js'
+      'src/inspector.js',
+      'src/unresolved.js'
     ];
 
     var MDV = [

src/unresolved.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2013 The Polymer Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+(function(scope) {
+  /*
+    Shim :unresolved via an attribute unresolved.
+    TODO(sorvell): This is currently done once when the first
+    round of elements are upgraded. This is incorrect, and it will
+    need to be done dynamically.
+    The 'resolved' attribute is experimental and may be removed.
+  */
+  var TRANSITION_TIME = 0.2;
+  var UNRESOLVED = 'unresolved';
+  var RESOLVED = 'resolved';
+  var UNRESOLVED_SELECTOR = '[' + UNRESOLVED + ']';
+  var RESOLVED_SELECTOR = '[' + RESOLVED + ']';
+  var style = document.createElement('style');
+
+  style.textContent = UNRESOLVED_SELECTOR + ' { ' +
+      'opacity: 0; display: block; overflow: hidden; } \n' +
+      RESOLVED_SELECTOR +  '{ display: block; overflow: hidden;\n' +
+      '-webkit-transition: opacity ' + TRANSITION_TIME + 's; ' +
+      'transition: opacity ' + TRANSITION_TIME +'s; }\n';
+  var head = document.querySelector('head');
+  head.insertBefore(style, head.firstChild);
+
+  // remove unresolved and apply resolved class
+  function resolveElements() {
+    requestAnimationFrame(function() {
+      var nodes = document.querySelectorAll(UNRESOLVED_SELECTOR);
+      for (var i=0, l=nodes.length, n; (i<l) && (n=nodes[i]); i++) {
+        n.removeAttribute(UNRESOLVED);
+        n.setAttribute(RESOLVED, '');
+      }
+
+      // NOTE: depends on transition end event to remove 'resolved' class.
+      if (nodes.length) {
+        var removeResolved = function() {
+          for (var i=0, l=nodes.length, n; (i<l) && (n=nodes[i]); i++) {
+            n.removeAttribute(RESOLVED);
+          }
+          document.body.removeEventListener(endEvent, removeResolved, false);
+        }
+        document.body.addEventListener(endEvent, removeResolved, false);
+      };
+
+    });
+  }
+
+  // determine transition end event
+  var endEvent = (document.documentElement.style.webkitTransition !== undefined) ?
+      'webkitTransitionEnd' : 'transitionend';
+
+  // hookup auto-unveiling
+  window.addEventListener('WebComponentsReady', resolveElements);
+
+})(Platform);