webComponentsSupported polyfill

webComponentsSupported.js

// 4. Conditionally load the webcomponents polyfill if needed by the browser

function finishLazyLoading() {
  window.Polymer = window.Polymer || {
    dom: 'shady' //'shadow'
  };

  // 6. Fade splash screen, then remove.
  var onImportLoaded = function() {
    var loadEl = document.getElementById('splash');
    document.body.classList.remove('loading');
    loadEl.remove();
    // loadEl.addEventListener('transitionend', loadEl.remove);
    // App is visible and ready to load some data!
    // Your funcs here
  };

  // 5. Go if the async Import loaded quickly. Otherwise wait for it.
  var link = document.querySelector('#elements');
  if ( link.import && (link.import.readyState === 'complete' || link.import.readyState === 'interactive')) {
    onImportLoaded();
  } else {
    link.addEventListener('load', onImportLoaded);
  }

  //old way
  // if (window.webComponentsSupported) {
  //   addEventListener('WebComponentsReady', onImportLoaded);
  // } else {
  //   if (document.readyState === 'interactive' || document.readyState === 'complete') {
  //     onImportLoaded();
  //   } else {
  //     addEventListener('DOMContentLoaded', onImportLoaded);
  //   }
  // }
}

var webComponentsSupported = ('registerElement' in document &&
  'import' in document.createElement('link') &&
  'content' in document.createElement('template'));

if (!webComponentsSupported) {
  var wcPoly = document.createElement('script');
  wcPoly.async = true;
  wcPoly.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
  wcPoly.onload = finishLazyLoading;
  document.head.appendChild(wcPoly);
} else {
  finishLazyLoading();
}