Port of github.com/polymer/polymer.

pkg/polymer/lib/boot.js

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 // This script dynamically prepares a set of files to run polymer.dart. It uses
 // the html_import polyfill to search for all imported files, then
 // it inlines all <polymer-element> definitions on the top-level page (needed by
 // registerPolymerElement), and it removes script tags that appear inside
 // those tags. It finally rewrites the main entrypoint to call an initialization
 // function on each of the declared <polymer-elements>.
@@ skipping 38 matching lines @@
 
 (function() {
   // Only run in Dartium.
   if (!navigator.webkitStartDart) {
     // TODO(sigmund): rephrase when we split build.dart in two: analysis vs
     // deploy pieces.
     console.warn('boot.js only works in Dartium. Run the build.dart' +
       ' tool to compile a depolyable JavaScript version')
     return;
   }
-  document.write(
-    '<script src="packages/html_import/html_import.min.js"></script>');
+
+
+  // Load HTML Imports:
+  var htmlImportsSrc = 'src="packages/html_import/html_import.min.js"';
+  document.write('<script ' + htmlImportsSrc + '></script>');
+  var importScript = document.querySelector('script[' + htmlImportsSrc + ']');
+  importScript.addEventListener('load', function() {
+    // NOTE: this is from polymer/src/lib/dom.js
+    window.HTMLImports.importer.preloadSelectors +=
+        ', polymer-element link[rel=stylesheet]';
+  });
+
+  // TODO(jmesserly): we need this in deploy tool too.
+  // NOTE: this is from polymer/src/boot.js:
+  // FOUC prevention tactic
+  var style = document.createElement('style');
+  style.textContent = 'body {opacity: 0;}';
+  var head = document.querySelector('head');
+  head.insertBefore(style, head.firstChild);
+
+  window.addEventListener('WebComponentsReady', function() {

[blois, 2013/09/27 21:40:52]

WebComponentsReady comes from the CustomElements polyfill, html imports fire
HTMLImportsLoaded.

Is this the right event? How is the custom elements polyfill being loaded?

[Jennifer Messerly, 2013/09/30 17:44:37]

Yes it is right. As TODO notes this code is copy+paste from polymer/src/boot.js

If you look in the custom element polyfill, the order is HTMLImportsLoaded (if
polyfill, otherwise DOMContentLoaded) followed by WebComponentsReady.

This is kinda wrong right now because custom_element.dart is a very limited
xtags polyfill. It will be right after your change lands to switch Polymer to
real custom elements

+    document.body.style.webkitTransition = 'opacity 0.3s';
+    document.body.style.opacity = 1;
+  });
 
   // Extract a Dart import URL from a script tag, which is the 'src' attribute
   // of the script tag, or a data-url with the script contents for inlined code.
   function getScriptUrl(script) {
     var url = script.src;
     if (url) {
       // Normalize package: urls
       var index = url.indexOf('packages/');
       if (index == 0 || (index > 0 && url[index - 1] == '/')) {
         url = "package:" + url.slice(index + 9);
@@ skipping 82 matching lines @@
     alreadyRan = true;
     var ref = document.body.children[0];
     inlinePolymerElements(document, ref);
     mergeScripts();
     if (!navigator.webkitStartDart()) {
       document.body.innerHTML = 'This build has expired. Please download a ' +
           'new Dartium at http://www.dartlang.org/dartium/index.html';
     }
   });
 })();