ebidel/wcr_lazyload.html

## wcr_lazyload.html
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> -->
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>

<paper-input placeholder="Placeholder text" label="Something fun" float-label></paper-input>
<paper-button>Button</paper-button>

<script>
(function() {
'use strict';

function lazyLoadWCPolyfillsIfNecessary() {

  var onload = function() {
    // For native Imports, manually fire WCR so user code
    // can use the same code path for native and polyfill'd imports.
    if (!window.HTMLImports) {
      document.dispatchEvent(
          new CustomEvent('WebComponentsReady', {bubbles: true}));
    }
  };

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

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

/**
 * Elements are guartneed to be upgraded and ready at this point.
 * It's safe to poke element properties, call methods, etc.
 *
 * Note: in Chrome (or a browser that natively supports HTML Imports)
 * waiting for this event is not needed. Imports will have already
 * loaded and upgraded elements by the time the bottom of the page
 * is reached. However, waiting for this event consolidates the code
 * paths between native and polyfill.
 */
document.addEventListener('WebComponentsReady', function(e) {
  alert('WebComponentsReady!!!');
});

lazyLoadWCPolyfillsIfNecessary();
})();
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<base href="https://polygit.org/components/">
	<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> -->
	<link rel="import" href="paper-input/paper-input.html">
	<link rel="import" href="paper-button/paper-button.html">
	</head>
	<body>

	<paper-input placeholder="Placeholder text" label="Something fun" float-label></paper-input>
	<paper-button>Button</paper-button>

	<script>
	(function() {
	'use strict';

	function lazyLoadWCPolyfillsIfNecessary() {

	var onload = function() {
	// For native Imports, manually fire WCR so user code
	// can use the same code path for native and polyfill'd imports.
	if (!window.HTMLImports) {
	document.dispatchEvent(
	new CustomEvent('WebComponentsReady', {bubbles: true}));
	}
	};

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

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

	/**
	* Elements are guartneed to be upgraded and ready at this point.
	* It's safe to poke element properties, call methods, etc.
	*
	* Note: in Chrome (or a browser that natively supports HTML Imports)
	* waiting for this event is not needed. Imports will have already
	* loaded and upgraded elements by the time the bottom of the page
	* is reached. However, waiting for this event consolidates the code
	* paths between native and polyfill.
	*/
	document.addEventListener('WebComponentsReady', function(e) {
	alert('WebComponentsReady!!!');
	});

	lazyLoadWCPolyfillsIfNecessary();
	})();
	</script>
	</body>
	</html>