From 6b6b03d5cec5be8a9c37045165b3b8bfe39fae18 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glenmaddern@gmail.com>
Date: Thu, 24 Jul 2014 13:54:03 +1000
Subject: [PATCH 1/5] Using platform.js to get this working on Firefox

Had to make some compromises to get this to work, but it runs on
Firefox 30 and Chrome 36! \o/
---
 components/todo-app/component.html  | 101 +-------------------
 components/todo-item/component.html |  42 +--------
 index.html                          | 139 +++++++++++++++++++++++++++-
 3 files changed, 144 insertions(+), 138 deletions(-)

diff --git a/components/todo-app/component.html b/components/todo-app/component.html
index 1fd5740..424854d 100644
--- a/components/todo-app/component.html
+++ b/components/todo-app/component.html
@@ -2,100 +2,7 @@
 <link rel="import" href="../todo-item/component.html">
 
 <!-- HTML -->
-<template id="template">
-
-  <!-- component styling -->
-  <style>
-    #addBtn {
-      width: 200px;
-      padding: 10px;
-    }
-
-    .todo-container {
-      width: 90%;
-      margin: 0 auto;
-      height: 500px;
-      overflow-y: auto;
-      padding: 10px;
-    }
-
-    todo-item{
-      margin-bottom: 10px;
-    }
-
-    todo-item[done]{
-      opacity: .5;
-    }
-
-    .new-item-container {
-      width: 90%;
-      margin: 0 auto;
-      padding-bottom: 10px;
-    }
-
-    .new-item {
-      width: 80%;
-      outline: none;
-      font-size:18px;
-      padding:10px 10px 10px 5px;
-      display:block;
-      border:none;
-      margin-top: 10px;
-      border-bottom:1px solid #757575;
-      background: none;
-    }
-
-    .new-item:focus {
-      border-bottom:1px solid #4059A9;
-    }
-
-    .toolbar {
-      background: #1a237e;
-      height: 64px;
-      width: 100%;
-      color: white;
-    }
-
-    .toolbar h1 {
-      font-weight: 300;
-      margin: 0 14px 8px;
-      line-height: 64px;
-      font-size: 1.3em;
-    }
-
-    .toolbar.bottom {
-      position: fixed;
-      bottom: 0;
-      color: white;
-      padding: 5px 5px 35px 5px;
-    }
-
-    .toolbar a {
-      color: #E1F5FE;
-    }
-  </style>
-
-  <!-- Toolbar -->
-  <div class="toolbar">
-    <h1>Web Components <strong>Todos</strong></h1>
-  </div>
-
-  <!-- Input field for new todo item -->
-  <div class="new-item-container">
-    <input type="text" class="new-item" placeholder="What would you like to do?" />
-  </div>
-
-  <!-- render the list of todo items -->
-  <!--<div class="todo-container"></div>-->
-  <div class="todo-container"></div>
-
-
-  <!-- Toolbar -->
-  <div class="toolbar bottom">
-    <p>A demo using <strong>native</strong> Custom Elements, Shadow DOM, HTML Imports, &lt;template&gt; &amp; localStorage. Thx to <a href="https://github.com/Tmw">Tmw</a> for starting this. <a href="https://github.com/addyosmani/componentized-todo">Source</a></p>
-  </div>
-
-</template>
+<!-- (moved to index.html) -->
 
 <!-- Interaction -->
 
@@ -114,7 +21,7 @@ <h1>Web Components <strong>Todos</strong></h1>
       this.shadow = this.context.createShadowRoot();
 
       // stamp out our template in the shadow dom
-      var template = document.querySelector("#template").content.cloneNode(true);
+      var template = document.querySelector("#todo-app-template").content.cloneNode(true);
       this.shadow.appendChild(template);
 
       // Setup event listener
@@ -164,7 +71,7 @@ <h1>Web Components <strong>Todos</strong></h1>
     TodoAppController.prototype.renderList = function(){
       // Note: renderList() can be significantly optimized. Leaving
       // as a Todo for now.
-      
+
       // Get a reference to the todo container within the shadow DOM
       var todoContainer = this.shadow.querySelector(".todo-container");
       var self = this;
@@ -210,5 +117,5 @@ <h1>Web Components <strong>Todos</strong></h1>
     // Register our todo-item tag with the document
     document.registerElement('todo-app', {prototype: TodoApp});
 
-  })(document.currentScript.ownerDocument);
+  })(document);
 </script>
diff --git a/components/todo-item/component.html b/components/todo-item/component.html
index a694335..b0d83cc 100644
--- a/components/todo-item/component.html
+++ b/components/todo-item/component.html
@@ -1,43 +1,7 @@
 <!DOCTYPE html>
 
 <!-- HTML -->
-<template id="template">
-  <p class="inline checkbox"><input type="checkbox"></p>
-  <p class="inline title"><content></content></p>
-
-  <!-- component styling -->
-  <style>
-    :host {
-      display: block;
-      padding: 10px;
-      transition: background-color .2s;
-      font-size: 1.2em;
-      color: #111;
-      font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    }
-
-    :host:done {
-      background-color: red
-    }
-
-    .inline{
-      display: inline;
-    }
-
-    .title{
-      font-weight: bold;
-    }
-
-    .title.done{
-      text-decoration: line-through;
-    }
-
-    :host:hover{
-      background-color: #E9F8FC;
-    }
-  </style>
-
-</template>
+<!-- (moved to index.html) -->
 
 <!-- JS - Interaction -->
 <script>
@@ -50,7 +14,7 @@
       this.shadow = context.createShadowRoot();
 
       // stamp out our template in the shadow dom
-      var template = document.querySelector("#template").content.cloneNode(true);
+      var template = document.querySelector("#todo-item-template").content.cloneNode(true);
       this.shadow.appendChild(template);
 
       // Pick the checkbox
@@ -116,5 +80,5 @@
     // register out todo-item tag with the document
     document.registerElement('todo-item', {prototype: TodoItem});
 
-})(document.currentScript.ownerDocument);
+})(document);
 </script>
diff --git a/index.html b/index.html
index 4aa6df8..3cd08f9 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
+
   <title>Componentized TODO</title>
   <link rel="stylesheet" href="app.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,9 +14,142 @@
   <todo-app>
   	<p class="fallback">
   	Whoops. Your browser doesn't support one or more of the Web Component
-  	features needed to run this demo. Work is underway in Firefox, Safari 
+  	features needed to run this demo. Work is underway in Firefox, Safari
   	and (possibly) IE to change that. Chrome 36+ should run this demo fine
   	for now. Maybe next time!</p>
   </todo-app>
+
+  <template id="todo-app-template">
+
+    <!-- component styling -->
+    <style>
+      #addBtn {
+        width: 200px;
+        padding: 10px;
+      }
+
+      .todo-container {
+        width: 90%;
+        margin: 0 auto;
+        height: 500px;
+        overflow-y: auto;
+        padding: 10px;
+      }
+
+      todo-item{
+        margin-bottom: 10px;
+      }
+
+      todo-item[done]{
+        opacity: .5;
+      }
+
+      .new-item-container {
+        width: 90%;
+        margin: 0 auto;
+        padding-bottom: 10px;
+      }
+
+      .new-item {
+        width: 80%;
+        outline: none;
+        font-size:18px;
+        padding:10px 10px 10px 5px;
+        display:block;
+        border:none;
+        margin-top: 10px;
+        border-bottom:1px solid #757575;
+        background: none;
+      }
+
+      .new-item:focus {
+        border-bottom:1px solid #4059A9;
+      }
+
+      .toolbar {
+        background: #1a237e;
+        height: 64px;
+        width: 100%;
+        color: white;
+      }
+
+      .toolbar h1 {
+        font-weight: 300;
+        margin: 0 14px 8px;
+        line-height: 64px;
+        font-size: 1.3em;
+      }
+
+      .toolbar.bottom {
+        position: fixed;
+        bottom: 0;
+        color: white;
+        padding: 5px 5px 35px 5px;
+      }
+
+      .toolbar a {
+        color: #E1F5FE;
+      }
+    </style>
+
+    <!-- Toolbar -->
+    <div class="toolbar">
+      <h1>Web Components <strong>Todos</strong></h1>
+    </div>
+
+    <!-- Input field for new todo item -->
+    <div class="new-item-container">
+      <input type="text" class="new-item" placeholder="What would you like to do?" />
+    </div>
+
+    <!-- render the list of todo items -->
+    <!--<div class="todo-container"></div>-->
+    <div class="todo-container"></div>
+
+
+    <!-- Toolbar -->
+    <div class="toolbar bottom">
+      <p>A demo using <strong>native</strong> Custom Elements, Shadow DOM, HTML Imports, &lt;template&gt; &amp; localStorage. Thx to <a href="https://github.com/Tmw">Tmw</a> for starting this. <a href="https://github.com/addyosmani/componentized-todo">Source</a></p>
+    </div>
+
+  </template>
+
+  <template id="todo-item-template">
+     <p class="inline checkbox"><input type="checkbox"></p>
+     <p class="inline title"><content></content></p>
+
+     <!-- component styling -->
+     <style>
+       :host {
+         display: block;
+         padding: 10px;
+         transition: background-color .2s;
+         font-size: 1.2em;
+         color: #111;
+         font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+       }
+
+       :host:done {
+         background-color: red
+       }
+
+       .inline{
+         display: inline;
+       }
+
+       .title{
+         font-weight: bold;
+       }
+
+       .title.done{
+         text-decoration: line-through;
+       }
+
+       :host:hover{
+         background-color: #E9F8FC;
+       }
+     </style>
+
+   </template>
 </body>
-</html>
\ No newline at end of file
+</html>

From 5f54fc595322e613e45e082441baf3c73f803ec5 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glenmaddern@gmail.com>
Date: Sun, 27 Jul 2014 21:13:25 +1000
Subject: [PATCH 2/5] Able to move the templates back!

By using both the real document and the shimmed ownerDocument, this works again! Much closer to the original version :)
---
 components/todo-app/component.html  | 101 ++++++++++++++++++++-
 components/todo-item/component.html |  44 ++++++++-
 index.html                          | 133 ----------------------------
 3 files changed, 137 insertions(+), 141 deletions(-)

diff --git a/components/todo-app/component.html b/components/todo-app/component.html
index 424854d..2db6b0a 100644
--- a/components/todo-app/component.html
+++ b/components/todo-app/component.html
@@ -2,12 +2,105 @@
 <link rel="import" href="../todo-item/component.html">
 
 <!-- HTML -->
-<!-- (moved to index.html) -->
+<template id="template">
+
+  <!-- component styling -->
+  <style>
+    #addBtn {
+      width: 200px;
+      padding: 10px;
+    }
+
+    .todo-container {
+      width: 90%;
+      margin: 0 auto;
+      height: 500px;
+      overflow-y: auto;
+      padding: 10px;
+    }
+
+    todo-item{
+      margin-bottom: 10px;
+    }
+
+    todo-item[done]{
+      opacity: .5;
+    }
+
+    .new-item-container {
+      width: 90%;
+      margin: 0 auto;
+      padding-bottom: 10px;
+    }
+
+    .new-item {
+      width: 80%;
+      outline: none;
+      font-size:18px;
+      padding:10px 10px 10px 5px;
+      display:block;
+      border:none;
+      margin-top: 10px;
+      border-bottom:1px solid #757575;
+      background: none;
+    }
+
+    .new-item:focus {
+      border-bottom:1px solid #4059A9;
+    }
+
+    .toolbar {
+      background: #1a237e;
+      height: 64px;
+      width: 100%;
+      color: white;
+    }
+
+    .toolbar h1 {
+      font-weight: 300;
+      margin: 0 14px 8px;
+      line-height: 64px;
+      font-size: 1.3em;
+    }
+
+    .toolbar.bottom {
+      position: fixed;
+      bottom: 0;
+      color: white;
+      padding: 5px 5px 35px 5px;
+    }
+
+    .toolbar a {
+      color: #E1F5FE;
+    }
+  </style>
+
+  <!-- Toolbar -->
+  <div class="toolbar">
+    <h1>Web Components <strong>Todos</strong></h1>
+  </div>
+
+  <!-- Input field for new todo item -->
+  <div class="new-item-container">
+    <input type="text" class="new-item" placeholder="What would you like to do?" />
+  </div>
+
+  <!-- render the list of todo items -->
+  <!--<div class="todo-container"></div>-->
+  <div class="todo-container"></div>
+
+
+  <!-- Toolbar -->
+  <div class="toolbar bottom">
+    <p>A demo using <strong>native</strong> Custom Elements, Shadow DOM, HTML Imports, &lt;template&gt; &amp; localStorage. Thx to <a href="https://github.com/Tmw">Tmw</a> for starting this. <a href="https://github.com/addyosmani/componentized-todo">Source</a></p>
+  </div>
+
+</template>
 
 <!-- Interaction -->
 
 <script>
-  (function(document){
+  (function(document, owner){
 
     var TodoAppController = function(context){
       // save the context to the custom element
@@ -21,7 +114,7 @@
       this.shadow = this.context.createShadowRoot();
 
       // stamp out our template in the shadow dom
-      var template = document.querySelector("#todo-app-template").content.cloneNode(true);
+      var template = owner.querySelector("#template").content.cloneNode(true);
       this.shadow.appendChild(template);
 
       // Setup event listener
@@ -117,5 +210,5 @@
     // Register our todo-item tag with the document
     document.registerElement('todo-app', {prototype: TodoApp});
 
-  })(document);
+  })(document, document._currentScript.ownerDocument);
 </script>
diff --git a/components/todo-item/component.html b/components/todo-item/component.html
index b0d83cc..e96e1cd 100644
--- a/components/todo-item/component.html
+++ b/components/todo-item/component.html
@@ -1,11 +1,47 @@
 <!DOCTYPE html>
 
 <!-- HTML -->
-<!-- (moved to index.html) -->
+<template id="template">
+   <p class="inline checkbox"><input type="checkbox"></p>
+   <p class="inline title"><content></content></p>
+
+   <!-- component styling -->
+   <style>
+     :host {
+       display: block;
+       padding: 10px;
+       transition: background-color .2s;
+       font-size: 1.2em;
+       color: #111;
+       font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+     }
+
+     :host:done {
+       background-color: red
+     }
+
+     .inline{
+       display: inline;
+     }
+
+     .title{
+       font-weight: bold;
+     }
+
+     .title.done{
+       text-decoration: line-through;
+     }
+
+     :host:hover{
+       background-color: #E9F8FC;
+     }
+   </style>
+
+ </template>
 
 <!-- JS - Interaction -->
 <script>
-  (function(document){
+  (function(document, owner){
 
     var TodoItemController = function(context){
       this.context = context;
@@ -14,7 +50,7 @@
       this.shadow = context.createShadowRoot();
 
       // stamp out our template in the shadow dom
-      var template = document.querySelector("#todo-item-template").content.cloneNode(true);
+      var template = owner.querySelector("#template").content.cloneNode(true);
       this.shadow.appendChild(template);
 
       // Pick the checkbox
@@ -80,5 +116,5 @@
     // register out todo-item tag with the document
     document.registerElement('todo-item', {prototype: TodoItem});
 
-})(document);
+})(document, document._currentScript.ownerDocument);
 </script>
diff --git a/index.html b/index.html
index 3cd08f9..62ede1b 100644
--- a/index.html
+++ b/index.html
@@ -18,138 +18,5 @@
   	and (possibly) IE to change that. Chrome 36+ should run this demo fine
   	for now. Maybe next time!</p>
   </todo-app>
-
-  <template id="todo-app-template">
-
-    <!-- component styling -->
-    <style>
-      #addBtn {
-        width: 200px;
-        padding: 10px;
-      }
-
-      .todo-container {
-        width: 90%;
-        margin: 0 auto;
-        height: 500px;
-        overflow-y: auto;
-        padding: 10px;
-      }
-
-      todo-item{
-        margin-bottom: 10px;
-      }
-
-      todo-item[done]{
-        opacity: .5;
-      }
-
-      .new-item-container {
-        width: 90%;
-        margin: 0 auto;
-        padding-bottom: 10px;
-      }
-
-      .new-item {
-        width: 80%;
-        outline: none;
-        font-size:18px;
-        padding:10px 10px 10px 5px;
-        display:block;
-        border:none;
-        margin-top: 10px;
-        border-bottom:1px solid #757575;
-        background: none;
-      }
-
-      .new-item:focus {
-        border-bottom:1px solid #4059A9;
-      }
-
-      .toolbar {
-        background: #1a237e;
-        height: 64px;
-        width: 100%;
-        color: white;
-      }
-
-      .toolbar h1 {
-        font-weight: 300;
-        margin: 0 14px 8px;
-        line-height: 64px;
-        font-size: 1.3em;
-      }
-
-      .toolbar.bottom {
-        position: fixed;
-        bottom: 0;
-        color: white;
-        padding: 5px 5px 35px 5px;
-      }
-
-      .toolbar a {
-        color: #E1F5FE;
-      }
-    </style>
-
-    <!-- Toolbar -->
-    <div class="toolbar">
-      <h1>Web Components <strong>Todos</strong></h1>
-    </div>
-
-    <!-- Input field for new todo item -->
-    <div class="new-item-container">
-      <input type="text" class="new-item" placeholder="What would you like to do?" />
-    </div>
-
-    <!-- render the list of todo items -->
-    <!--<div class="todo-container"></div>-->
-    <div class="todo-container"></div>
-
-
-    <!-- Toolbar -->
-    <div class="toolbar bottom">
-      <p>A demo using <strong>native</strong> Custom Elements, Shadow DOM, HTML Imports, &lt;template&gt; &amp; localStorage. Thx to <a href="https://github.com/Tmw">Tmw</a> for starting this. <a href="https://github.com/addyosmani/componentized-todo">Source</a></p>
-    </div>
-
-  </template>
-
-  <template id="todo-item-template">
-     <p class="inline checkbox"><input type="checkbox"></p>
-     <p class="inline title"><content></content></p>
-
-     <!-- component styling -->
-     <style>
-       :host {
-         display: block;
-         padding: 10px;
-         transition: background-color .2s;
-         font-size: 1.2em;
-         color: #111;
-         font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-       }
-
-       :host:done {
-         background-color: red
-       }
-
-       .inline{
-         display: inline;
-       }
-
-       .title{
-         font-weight: bold;
-       }
-
-       .title.done{
-         text-decoration: line-through;
-       }
-
-       :host:hover{
-         background-color: #E9F8FC;
-       }
-     </style>
-
-   </template>
 </body>
 </html>

From e411da52e3c5379b950875f8a24e331d5df9a35c Mon Sep 17 00:00:00 2001
From: Glen Maddern <glenmaddern@gmail.com>
Date: Sun, 27 Jul 2014 21:15:47 +1000
Subject: [PATCH 3/5] whitespace fixes to make the diffs nicer

---
 components/todo-item/component.html | 72 ++++++++++++++---------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/components/todo-item/component.html b/components/todo-item/component.html
index e96e1cd..27a11ec 100644
--- a/components/todo-item/component.html
+++ b/components/todo-item/component.html
@@ -2,42 +2,42 @@
 
 <!-- HTML -->
 <template id="template">
-   <p class="inline checkbox"><input type="checkbox"></p>
-   <p class="inline title"><content></content></p>
-
-   <!-- component styling -->
-   <style>
-     :host {
-       display: block;
-       padding: 10px;
-       transition: background-color .2s;
-       font-size: 1.2em;
-       color: #111;
-       font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-     }
-
-     :host:done {
-       background-color: red
-     }
-
-     .inline{
-       display: inline;
-     }
-
-     .title{
-       font-weight: bold;
-     }
-
-     .title.done{
-       text-decoration: line-through;
-     }
-
-     :host:hover{
-       background-color: #E9F8FC;
-     }
-   </style>
-
- </template>
+  <p class="inline checkbox"><input type="checkbox"></p>
+  <p class="inline title"><content></content></p>
+
+  <!-- component styling -->
+  <style>
+    :host {
+     display: block;
+     padding: 10px;
+     transition: background-color .2s;
+     font-size: 1.2em;
+     color: #111;
+     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    }
+
+    :host:done {
+     background-color: red
+    }
+
+    .inline{
+     display: inline;
+    }
+
+    .title{
+     font-weight: bold;
+    }
+
+    .title.done{
+     text-decoration: line-through;
+    }
+
+    :host:hover{
+     background-color: #E9F8FC;
+    }
+  </style>
+
+</template>
 
 <!-- JS - Interaction -->
 <script>

From d75714e110324681dbe4fe21bca50ce972299847 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glenmaddern@gmail.com>
Date: Sun, 27 Jul 2014 21:16:29 +1000
Subject: [PATCH 4/5] and more whitespace fixes

---
 components/todo-item/component.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/todo-item/component.html b/components/todo-item/component.html
index 27a11ec..7629328 100644
--- a/components/todo-item/component.html
+++ b/components/todo-item/component.html
@@ -8,32 +8,32 @@
   <!-- component styling -->
   <style>
     :host {
-     display: block;
-     padding: 10px;
-     transition: background-color .2s;
-     font-size: 1.2em;
-     color: #111;
-     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+      display: block;
+      padding: 10px;
+      transition: background-color .2s;
+      font-size: 1.2em;
+      color: #111;
+      font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
     }
 
     :host:done {
-     background-color: red
+      background-color: red
     }
 
     .inline{
-     display: inline;
+      display: inline;
     }
 
     .title{
-     font-weight: bold;
+      font-weight: bold;
     }
 
     .title.done{
-     text-decoration: line-through;
+      text-decoration: line-through;
     }
 
     :host:hover{
-     background-color: #E9F8FC;
+      background-color: #E9F8FC;
     }
   </style>
 

From 3e5112136b46b86b8e394d2601230fb6c78f61fc Mon Sep 17 00:00:00 2001
From: Glen Maddern <glenmaddern@gmail.com>
Date: Mon, 28 Jul 2014 18:11:06 +1000
Subject: [PATCH 5/5] Now works in both Chrome & Firefox!

Feature detection FTW!
---
 components/todo-app/component.html  |  2 +-
 components/todo-item/component.html |  2 +-
 index.html                          | 12 ++++++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/todo-app/component.html b/components/todo-app/component.html
index 2db6b0a..1caeba7 100644
--- a/components/todo-app/component.html
+++ b/components/todo-app/component.html
@@ -210,5 +210,5 @@ <h1>Web Components <strong>Todos</strong></h1>
     // Register our todo-item tag with the document
     document.registerElement('todo-app', {prototype: TodoApp});
 
-  })(document, document._currentScript.ownerDocument);
+  })(document, (document._currentScript || document.currentScript).ownerDocument);
 </script>
diff --git a/components/todo-item/component.html b/components/todo-item/component.html
index 7629328..4070f01 100644
--- a/components/todo-item/component.html
+++ b/components/todo-item/component.html
@@ -116,5 +116,5 @@
     // register out todo-item tag with the document
     document.registerElement('todo-item', {prototype: TodoItem});
 
-})(document, document._currentScript.ownerDocument);
+})(document, (document._currentScript || document.currentScript).ownerDocument);
 </script>
diff --git a/index.html b/index.html
index 62ede1b..8a4b808 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,21 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
-
   <title>Componentized TODO</title>
   <link rel="stylesheet" href="app.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet'>
 
+  <script>
+    if ('registerElement' in document
+      && 'createShadowRoot' in HTMLElement.prototype
+      && 'import' in document.createElement('link')
+      && 'content' in document.createElement('template')) {
+      // We're using a browser with native WC support!
+    } else {
+      document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
+    }
+  </script>
   <link rel="import" href="components/todo-app/component.html">
 </head>
 <body>