bootstrap.html

<!-- <link rel="import" href="../bower_components/polymer/polymer.html"> -->
<link rel="import" href="../bower_components/polymer/polymer-standard.html">

<link rel="import" href="body-bind.html">

<!-- Phase 2: bootstrap some of the app's initial data. -->
<link rel="import" href="my-app.html">

<!-- Load rest of polymer custom elements after my-app. -->
<link rel="import" href="../bower_components/polymer/polymer-elements.html">

<!-- Phase 3: load elements bundle -->
<script>
(function() {
'use strict';

  // TODO: use Polymer.Base.importHref when it uses .async.
  function importHref(href, async=true) {
    return new Promise((resolve, reject) => {
      var l = document.createElement('link');
      l.rel = 'import';
      l.href = href;
      if (async) {
        l.setAttribute('async', '');
      }
      l.onload = e => resolve(e.target);
      l.onerror = reject;

      document.head.appendChild(l);
    });
  }

  // Phase 4: Async fetch vulcanied elements bundle last.
  importHref('elements/elements-no-polymer.v.html').then(function(link) {
    var entry = window.performance.getEntriesByName(link.href)[0];
    var str = `started @ ${entry.startTime.toFixed(2)} ms, took: ${entry.duration.toFixed(2)} ms`;
    console.info('Elements bundle: ' + str);
    document.querySelector('#e_output output').textContent = str;
  }, e => console.error(e));

})();
</script>

<!--
Declaratively loading elements.html would work and it would get vulcanized
with bootstrap.html. However, causes the entire download to take longer,
thus increasing the time until the bindings have data. -->
<!-- <link rel="import" href="elements.html"> -->