Conditionally load the polyfills

ca79b436 · Eric Bidelman · 23591c48 · ca79b436
Commit ca79b436 authored Oct 02, 2015 by Eric Bidelman
Hide whitespace changes
Inline Side-by-side

Showing with 17 additions and 3 deletions

examples/polymer/index.html examples/polymer/index.html +17 -3

No files found.
--- a/examples/polymer/index.html
+++ b/examples/polymer/index.html
@@ -3,11 +3,10 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Polymer • TodoMVC</title>
-		<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" async></script>
 		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
 		<link rel="stylesheet" href="bower_components/todomvc-app-css/index.css">
 		<link rel="import" href="elements/elements.build.html" async>
-		<!-- <link rel="import" href="elements/elements.html"> -->
+		<!-- <link rel="import" href="elements/elements.html"> for dev -->
 	</head>
 	<body>
 		<div id="todoapp">
@@ -24,6 +23,21 @@
 			<p>Created by <a href="https://www.polymer-project.org/1.0/">The Polymer Authors</a></p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
-		<script src="bower_components/todomvc-common/base.js"></script>
+		<script src="bower_components/todomvc-common/base.js" async></script>
+		<script>
+			(function() {
+				// Feature detect and conditionally load the polyfills.
+			  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 = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
+				  document.head.appendChild(script);
+				}
+			})();
+		</script>
 	</body>
 </html>