From c93c9f21fa309128c6e27ab665c87451913c5313 Mon Sep 17 00:00:00 2001
From: Koen Kivits <koen@kivits.com>
Date: Tue, 8 Dec 2015 21:16:33 +0100
Subject: [PATCH 01/19] Improve README documentation on CSS encapsulation

Should fix #451 and #458 to some extent.
---
 README.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/README.md b/README.md
index 9cf692f72..7319f7409 100644
--- a/README.md
+++ b/README.md
@@ -90,11 +90,25 @@ window.addEventListener('WebComponentsReady', function(e) {
 
 ## Known Issues
 
+  * [Limited CSS encapsulation](#encapsulation)
   * [Custom element's constructor property is unreliable](#constructor)
   * [Contenteditable elements do not trigger MutationObserver](#contentedit)
   * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
   * [execCommand isn't supported under Shadow DOM](#execcommand)
 
+### Limited CSS encapsulation <a id="encapsulation"></a>
+Under native Shadow DOM, CSS selectors cannot cross the shadow boundary. This means document level styles don't apply to shadow roots, and styles defined within a shadow root don't apply outside of that shadow root. [Several selectors](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/) are provided to be able to deal with the shadow boundary.
+
+The Shadow DOM polyfill can't prevent document styles from leaking into shadow roots. It can, however, encapsulate styles within shadow roots to some extent. This behavior isn't automatically emulated by the Shadow DOM polyfill, but it can be achieved by manually using the included ShadowCSS shim:
+
+```
+WebComponents.ShadowCSS.shimStyling( shadowRoot, scope );
+```
+
+... where `shadowRoot` is the shadow root of a DOM element, and `scope` is the name of the scope used to prefix the selectors. This removes all `<style>` elements from the shadow root, rewrites it rules using the given scope and reinserts the style as a document level stylesheet. Note that the `:host` and `:host-context` pseudo classes are also rewritten.
+
+For a full explanation on the implementation and both the possibilities and the limitations of ShadowCSS please view the documentation in the [ShadowCSS source](src/ShadowCSS/ShadowCSS.js).
+
 ### Custom element's constructor property is unreliable <a id="constructor"></a>
 See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.
 

From aea01af17a97766efd820c571948ba9a82390876 Mon Sep 17 00:00:00 2001
From: Koen Kivits <koen@kivits.com>
Date: Tue, 8 Dec 2015 21:19:14 +0100
Subject: [PATCH 02/19] Added ShadowCSS known issue with :host()

Documented the known issue with nested parentheses when using :host()
---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 7319f7409..4e4fe5c31 100644
--- a/README.md
+++ b/README.md
@@ -94,6 +94,7 @@ window.addEventListener('WebComponentsReady', function(e) {
   * [Custom element's constructor property is unreliable](#constructor)
   * [Contenteditable elements do not trigger MutationObserver](#contentedit)
   * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
+  * [ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)
   * [execCommand isn't supported under Shadow DOM](#execcommand)
 
 ### Limited CSS encapsulation <a id="encapsulation"></a>
@@ -133,6 +134,9 @@ don't work, despite working under native Shadow DOM. The solution is to use `pol
 polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }
 ```
 
+### ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedparens"></a>
+ShadowCSS `:host()` rules can only have (at most) 1-level of nested parentheses in its argument selector under ShadowCSS. For example, `:host(.zot)` and `:host(.zot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not. 
+
 ### execCommand and contenteditable isn't supported under Shadow DOM <a id="execcommand"></a>
 See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)
 

From 8fd7a6c0b6201fadd78bcbc96f50830878f08a80 Mon Sep 17 00:00:00 2001
From: Koen Kivits <koen@kivits.com>
Date: Tue, 8 Dec 2015 21:20:38 +0100
Subject: [PATCH 03/19] Added Element wrapping limitations to Known Issues

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 4e4fe5c31..e89ec828f 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ window.addEventListener('WebComponentsReady', function(e) {
 ## Known Issues
 
   * [Limited CSS encapsulation](#encapsulation)
+  * [Element wrapping / unwrapping limitations](#wrapping)
   * [Custom element's constructor property is unreliable](#constructor)
   * [Contenteditable elements do not trigger MutationObserver](#contentedit)
   * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
@@ -110,6 +111,13 @@ WebComponents.ShadowCSS.shimStyling( shadowRoot, scope );
 
 For a full explanation on the implementation and both the possibilities and the limitations of ShadowCSS please view the documentation in the [ShadowCSS source](src/ShadowCSS/ShadowCSS.js).
 
+### Element wrapping / unwrapping limitations <a id="wrapping"></a>
+The Shadow DOM polyfill is implemented by [wrapping](http://webcomponents.org/polyfills/shadow-dom/#wrappers) DOM elements whenever possible. It does this by wrapping methods like `document.querySelector` to return wrapped DOM elements. This has a few caveats:
+   * Not _everything_ can be wrapped. For example, elements like `document`, `window`, `document.body`, `document.fullscreenElement` and others are non-configurable and thus cannot be overridden.
+   * Wrappers don't support [live NodeLists](https://developer.mozilla.org/en-US/docs/Web/API/NodeList#A_sometimes-live_collection) like `HTMLElement.childNodes` and `HTMLFormElement.elements`. All NodeLists are snapshotted upon read. See [#217](https://github.com/webcomponents/webcomponentsjs/issues/217) for an explanation.
+
+In order to work around these limitations the polyfill provides the `ShadowDOMPolyfill.wrap` and `ShadowDOMPolyfill.unwrap` methods to respectively wrap and unwrap DOM elements manually.
+
 ### Custom element's constructor property is unreliable <a id="constructor"></a>
 See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.
 

From 60470a7f7403f195e435a11f3e012b2d6ebcaedc Mon Sep 17 00:00:00 2001
From: Koen Kivits <koen@kivits.com>
Date: Tue, 8 Dec 2015 21:32:36 +0100
Subject: [PATCH 04/19] Added known issue with document.currentScript

Text is almost literally from http://webcomponents.org/polyfills/html-imports/
---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index e89ec828f..01774b98a 100644
--- a/README.md
+++ b/README.md
@@ -96,6 +96,7 @@ window.addEventListener('WebComponentsReady', function(e) {
   * [Contenteditable elements do not trigger MutationObserver](#contentedit)
   * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
   * [ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens)
+  * [HTML imports: document.currentScript doesn't work as expected](#currentscript)
   * [execCommand isn't supported under Shadow DOM](#execcommand)
 
 ### Limited CSS encapsulation <a id="encapsulation"></a>
@@ -145,6 +146,9 @@ polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }
 ### ShadowCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work <a id="nestedparens"></a>
 ShadowCSS `:host()` rules can only have (at most) 1-level of nested parentheses in its argument selector under ShadowCSS. For example, `:host(.zot)` and `:host(.zot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not. 
 
+### HTML imports: document.currentScript doesn't work as expected <a id="currentscript"></a>
+In native HTML Imports, document.currentScript.ownerDocument references the import document itself. In the polyfill use document._currentScript.ownerDocument (note the underscore).
+
 ### execCommand and contenteditable isn't supported under Shadow DOM <a id="execcommand"></a>
 See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)
 

From b88aeb07dbc15e61e01013f9f19e607ba96c14aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Mon, 28 Dec 2015 14:36:50 +0100
Subject: [PATCH 05/19] Remove unused variable from parser.js

---
 src/HTMLImports/parser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/HTMLImports/parser.js b/src/HTMLImports/parser.js
index 81214014d..a52d9decb 100644
--- a/src/HTMLImports/parser.js
+++ b/src/HTMLImports/parser.js
@@ -255,7 +255,7 @@ var importParser = {
     if (doc && this._mayParse.indexOf(doc) < 0) {
       this._mayParse.push(doc);
       var nodes = doc.querySelectorAll(this.parseSelectorsForNode(doc));
-      for (var i=0, l=nodes.length, p=0, n; (i<l) && (n=nodes[i]); i++) {
+      for (var i=0, l=nodes.length, n; (i<l) && (n=nodes[i]); i++) {
         if (!this.isParsed(n)) {
           if (this.hasResource(n)) {
             return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;

From ce3e721b85fc7ed097c559b1f72b85646fbd2014 Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Wed, 6 Jan 2016 10:56:12 -0800
Subject: [PATCH 06/19] Reverts #463: ShadowRoots' activeElement no longer
 returns elements in light DOM.

---
 src/ShadowDOM/wrappers/ShadowRoot.js    | 11 ++---------
 tests/ShadowDOM/html/activeElement.html | 18 +++++++++---------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/ShadowDOM/wrappers/ShadowRoot.js b/src/ShadowDOM/wrappers/ShadowRoot.js
index d868014d1..915462ef4 100644
--- a/src/ShadowDOM/wrappers/ShadowRoot.js
+++ b/src/ShadowDOM/wrappers/ShadowRoot.js
@@ -80,15 +80,8 @@
 
       var activeElement = wrap(unwrappedActiveElement);
 
-      // If the active element is this ShadowRoot's host, this ShadowRoot
-      // has no active element.
-      if (activeElement === this.host) {
-        return null;
-      }
-
-      // Loop while activeElement is not a shallow descendant of this ShadowRoot
-      // or this ShadowRoot's host.
-      while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
+      // Loop while activeElement is not a shallow child of this ShadowRoot.
+      while (!this.contains(activeElement)) {
         // Iterate until we hit activeElement's containing ShadowRoot (which
         // isn't this one) or document.
         while (activeElement.parentNode) {
diff --git a/tests/ShadowDOM/html/activeElement.html b/tests/ShadowDOM/html/activeElement.html
index f79b24de5..3044746af 100644
--- a/tests/ShadowDOM/html/activeElement.html
+++ b/tests/ShadowDOM/html/activeElement.html
@@ -131,7 +131,7 @@
     r_l.focus();
 
     assert.equal(doc.activeElement, r_l);
-    assert.equal(r.shadowRoot.activeElement, r_l);
+    assert.equal(r.shadowRoot.activeElement, null);
     assert.equal(r_0.shadowRoot.activeElement, null);
     assert.equal(r_0_0.shadowRoot.activeElement, null);
     assert.equal(r_0_1.shadowRoot.activeElement, null);
@@ -158,7 +158,7 @@
 
     assert.equal(doc.activeElement, r);
     assert.equal(r.shadowRoot.activeElement, r_0_l);
-    assert.equal(r_0.shadowRoot.activeElement, r_0_l);
+    assert.equal(r_0.shadowRoot.activeElement, null);
     assert.equal(r_0_0.shadowRoot.activeElement, null);
     assert.equal(r_0_1.shadowRoot.activeElement, null);
     assert.equal(r_1.shadowRoot.activeElement, null);
@@ -185,7 +185,7 @@
     assert.equal(doc.activeElement, r);
     assert.equal(r.shadowRoot.activeElement, r_0);
     assert.equal(r_0.shadowRoot.activeElement, r_0_0_l);
-    assert.equal(r_0_0.shadowRoot.activeElement, r_0_0_l);
+    assert.equal(r_0_0.shadowRoot.activeElement, null);
     assert.equal(r_0_1.shadowRoot.activeElement, null);
     assert.equal(r_1.shadowRoot.activeElement, null);
     assert.equal(r_1_0.shadowRoot.activeElement, null);
@@ -212,7 +212,7 @@
     assert.equal(r.shadowRoot.activeElement, r_0);
     assert.equal(r_0.shadowRoot.activeElement, r_0_1_l);
     assert.equal(r_0_0.shadowRoot.activeElement, null);
-    assert.equal(r_0_1.shadowRoot.activeElement, r_0_1_l);
+    assert.equal(r_0_1.shadowRoot.activeElement, null);
     assert.equal(r_1.shadowRoot.activeElement, null);
     assert.equal(r_1_0.shadowRoot.activeElement, null);
     assert.equal(r_1_1.shadowRoot.activeElement, null);
@@ -239,7 +239,7 @@
     assert.equal(r_0.shadowRoot.activeElement, null);
     assert.equal(r_0_0.shadowRoot.activeElement, null);
     assert.equal(r_0_1.shadowRoot.activeElement, null);
-    assert.equal(r_1.shadowRoot.activeElement, r_1_l);
+    assert.equal(r_1.shadowRoot.activeElement, null);
     assert.equal(r_1_0.shadowRoot.activeElement, null);
     assert.equal(r_1_1.shadowRoot.activeElement, null);
   });
@@ -252,7 +252,7 @@
     assert.equal(r_0.shadowRoot.activeElement, null);
     assert.equal(r_0_0.shadowRoot.activeElement, null);
     assert.equal(r_0_1.shadowRoot.activeElement, null);
-    assert.equal(r_1.shadowRoot.activeElement, r_1_l);
+    assert.equal(r_1.shadowRoot.activeElement, null);
     assert.equal(r_1_l.shadowRoot.activeElement, r_1_l_0);
     assert.equal(r_1_0.shadowRoot.activeElement, null);
     assert.equal(r_1_1.shadowRoot.activeElement, null);
@@ -266,7 +266,7 @@
     assert.equal(r_0.shadowRoot.activeElement, null);
     assert.equal(r_0_0.shadowRoot.activeElement, null);
     assert.equal(r_0_1.shadowRoot.activeElement, null);
-    assert.equal(r_1.shadowRoot.activeElement, r_1_l);
+    assert.equal(r_1.shadowRoot.activeElement, null);
     assert.equal(r_1_l.shadowRoot.activeElement, r_1_l_1);
     assert.equal(r_1_0.shadowRoot.activeElement, null);
     assert.equal(r_1_1.shadowRoot.activeElement, null);
@@ -294,7 +294,7 @@
     assert.equal(r_0_0.shadowRoot.activeElement, null);
     assert.equal(r_0_1.shadowRoot.activeElement, null);
     assert.equal(r_1.shadowRoot.activeElement, r_1_0_l);
-    assert.equal(r_1_0.shadowRoot.activeElement, r_1_0_l);
+    assert.equal(r_1_0.shadowRoot.activeElement, null);
     assert.equal(r_1_1.shadowRoot.activeElement, null);
   });
 
@@ -321,7 +321,7 @@
     assert.equal(r_0_1.shadowRoot.activeElement, null);
     assert.equal(r_1.shadowRoot.activeElement, r_1_1_l);
     assert.equal(r_1_0.shadowRoot.activeElement, null);
-    assert.equal(r_1_1.shadowRoot.activeElement, r_1_1_l);
+    assert.equal(r_1_1.shadowRoot.activeElement, null);
   });
 });
 

From cee5845a5bc663fe5a5c261d9b7c2c3f9fdce873 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 28 Jan 2016 11:35:54 -0800
Subject: [PATCH 07/19] Hide polyfill templates from rendering

Fixes #481
---
 src/Template/Template.js  |  6 ++++++
 tests/Template/tests.html | 23 ++++++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index 5cf73edd7..b7ae60f0a 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -17,6 +17,12 @@ if (typeof HTMLTemplateElement === 'undefined') {
     var contentDoc = document.implementation.createHTMLDocument('template');
     var canDecorate = true;
 
+    var templateStyle = document.createElement('style');
+    templateStyle.textContent = TEMPLATE_TAG + '{display:none;}';
+
+    var head = document.head;
+    head.insertBefore(templateStyle, head.firstElementChild);
+
     /**
       Provides a minimal shim for the <template> element.
     */
diff --git a/tests/Template/tests.html b/tests/Template/tests.html
index 743f23002..64fe32fb9 100644
--- a/tests/Template/tests.html
+++ b/tests/Template/tests.html
@@ -15,9 +15,20 @@
     <script src="../../../web-component-tester/browser.js"></script>
   </head>
   <body>
-    <template>
-      <span id="content">Hello World!</span>
-    </template>
+    <style>
+      .container {
+        display: flex;
+      }
+      .container > *{
+        flex: 1;
+      }
+    </style>
+
+    <div class="container">
+      <template>
+        <span id="content">Hello World!</span>
+      </template>
+    </div>
 
     <script>
       suite('Template', function() {
@@ -63,6 +74,12 @@
           assert.equal(imp.innerHTML, escaped);
           assert.equal(imp.content.childNodes.length, div.childNodes.length);
         });
+
+        test('No rendering', function() {
+          var bcr = template.getBoundingClientRect();
+          assert.equal(bcr.height, 0);
+          assert.equal(bcr.width, 0);
+        });
       });
     </script>
   </body>

From 3af33f74a2485b7309328248d6f6c472f23896da Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 9 Feb 2016 18:37:36 -0800
Subject: [PATCH 08/19] Template polypill: (a) support template.cloneNode and
 (b) document.importNode(template). Supports nested templates.

---
 src/Template/Template.js  | 37 ++++++++++++++++
 tests/Template/tests.html | 91 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 127 insertions(+), 1 deletion(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index 5cf73edd7..6bcfa58cc 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -61,15 +61,52 @@ if (typeof HTMLTemplateElement === 'undefined') {
             },
             configurable: true
           });
+
+          template.cloneNode = function(deep) {
+            return HTMLTemplateElement.cloneNode(this, deep);
+          };
+
         } catch (err) {
           canDecorate = false;
         }
       }
 
+      var nativeCloneNode = Node.prototype.cloneNode;
+
+      HTMLTemplateElement.cloneNode = function(template, deep) {
+        var clone = nativeCloneNode.call(template);
+        this.decorate(clone);
+        if (deep) {
+          // NOTE: use native clone node to make sure CE's wrapped
+          // cloneNode does not cause elements to upgrade.
+          clone.content.appendChild(
+              nativeCloneNode.call(template.content, true));
+          // these two lists should be coincident
+          var s$ = template.content.querySelectorAll(TEMPLATE_TAG);
+          var t$ = clone.content.querySelectorAll(TEMPLATE_TAG);
+          for (var i=0, l=t$.length, t, s; i<l; i++) {
+            s = s$[i];
+            t = t$[i];
+            this.decorate(s);
+            t.parentNode.replaceChild(s.cloneNode(true), t);
+          }        
+        }
+        return clone;
+      };
+
       // bootstrap recursively
       HTMLTemplateElement.bootstrap(template.content);
     };
 
+    var originalImportNode = document.importNode;
+
+    // clone instead of importing <template>
+    document.importNode = function(element, deep) {
+      return (element.localName === TEMPLATE_TAG) ?
+        HTMLTemplateElement.cloneNode(element, deep) :
+        originalImportNode.call(document, element, deep);
+    };
+
     /**
       The `bootstrap` method is called automatically and "fixes" all
       <template> elements in the document referenced by the `doc` argument.
diff --git a/tests/Template/tests.html b/tests/Template/tests.html
index 743f23002..b8cdfe87c 100644
--- a/tests/Template/tests.html
+++ b/tests/Template/tests.html
@@ -61,8 +61,97 @@
           div.innerHTML = s;
           // innerHTML is properly escaped
           assert.equal(imp.innerHTML, escaped);
-          assert.equal(imp.content.childNodes.length, div.childNodes.length);
+          assert.equal(imp.content.textContent, div.textContent);
         });
+
+        test('clone', function() {
+          var imp = document.createElement('template');
+          var s = '<div>Hi</div>';
+          imp.innerHTML = s;
+          var clone = imp.cloneNode();
+          assert.notEqual(clone, imp, 'element is not cloned');
+          assert.isDefined(clone.content, 'cloned template content dne');
+          assert.equal(clone.content.childNodes.length, 0, 
+              'non-deep cloned template.content is not empty');
+          var deepClone = imp.cloneNode(true);
+          assert.equal(deepClone.content.childNodes.length, 1, 
+              'deep cloned template.content is empty');
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+              'cloned content is not different from source');
+        });
+
+        test('nested clone', function() {
+          var imp = document.createElement('template');
+          var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
+          imp.innerHTML = s;
+          var clone = imp.cloneNode();
+          assert.notEqual(clone, imp, 'element is not cloned');
+          assert.isDefined(clone.content, 'cloned template content dne');
+          assert.equal(clone.content.childNodes.length, 0, 
+              'non-deep cloned template.content is not empty');
+          var deepClone = imp.cloneNode(true);
+          assert.equal(deepClone.content.childNodes.length, 2, 
+              'deep cloned template.content is empty');
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+              'cloned content is not different from source');
+          var nested = deepClone.content.lastChild;
+          assert.isDefined(nested.content, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2, 
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2, 
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 1, 
+              'deep cloned template.content is empty');
+        });
+
+        test('importNode', function() {
+          var imp = document.createElement('template');
+          var s = '<div>Hi</div>';
+          imp.innerHTML = s;
+          var clone = document.importNode(imp);
+          assert.notEqual(clone, imp, 'element is not cloned');
+          assert.isDefined(clone.content, 'cloned template content dne');
+          assert.equal(clone.content.childNodes.length, 0, 
+              'non-deep cloned template.content is not empty');
+          var deepClone = document.importNode(imp, true);
+          assert.equal(deepClone.content.childNodes.length, 1, 
+              'deep cloned template.content is empty');
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+              'cloned content is not different from source');
+        });
+
+        test('nested importNode', function() {
+          var imp = document.createElement('template');
+          var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
+          imp.innerHTML = s;
+          var clone = document.importNode(imp);
+          assert.notEqual(clone, imp, 'element is not cloned');
+          assert.isDefined(clone.content, 'cloned template content dne');
+          assert.equal(clone.content.childNodes.length, 0, 
+              'non-deep cloned template.content is not empty');
+          var deepClone = document.importNode(imp, true);
+          assert.equal(deepClone.content.childNodes.length, 2, 
+              'deep cloned template.content is empty');
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+              'cloned content is not different from source');
+          var nested = deepClone.content.lastChild;
+          assert.isDefined(nested.content, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2, 
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2, 
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 1, 
+              'deep cloned template.content is empty');
+        });
+
       });
     </script>
   </body>

From 409922112222aff184cb3b5422a0c0c3f757c3a2 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 9 Feb 2016 18:53:26 -0800
Subject: [PATCH 09/19] Fix typo

---
 src/Template/Template.js | 47 ++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index 6bcfa58cc..fd79361ff 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -70,34 +70,33 @@ if (typeof HTMLTemplateElement === 'undefined') {
           canDecorate = false;
         }
       }
-
-      var nativeCloneNode = Node.prototype.cloneNode;
-
-      HTMLTemplateElement.cloneNode = function(template, deep) {
-        var clone = nativeCloneNode.call(template);
-        this.decorate(clone);
-        if (deep) {
-          // NOTE: use native clone node to make sure CE's wrapped
-          // cloneNode does not cause elements to upgrade.
-          clone.content.appendChild(
-              nativeCloneNode.call(template.content, true));
-          // these two lists should be coincident
-          var s$ = template.content.querySelectorAll(TEMPLATE_TAG);
-          var t$ = clone.content.querySelectorAll(TEMPLATE_TAG);
-          for (var i=0, l=t$.length, t, s; i<l; i++) {
-            s = s$[i];
-            t = t$[i];
-            this.decorate(s);
-            t.parentNode.replaceChild(s.cloneNode(true), t);
-          }        
-        }
-        return clone;
-      };
-
       // bootstrap recursively
       HTMLTemplateElement.bootstrap(template.content);
     };
 
+    var nativeCloneNode = Node.prototype.cloneNode;
+
+    HTMLTemplateElement.cloneNode = function(template, deep) {
+      var clone = nativeCloneNode.call(template);
+      this.decorate(clone);
+      if (deep) {
+        // NOTE: use native clone node to make sure CE's wrapped
+        // cloneNode does not cause elements to upgrade.
+        clone.content.appendChild(
+            nativeCloneNode.call(template.content, true));
+        // these two lists should be coincident
+        var s$ = template.content.querySelectorAll(TEMPLATE_TAG);
+        var t$ = clone.content.querySelectorAll(TEMPLATE_TAG);
+        for (var i=0, l=t$.length, t, s; i<l; i++) {
+          s = s$[i];
+          t = t$[i];
+          this.decorate(s);
+          t.parentNode.replaceChild(s.cloneNode(true), t);
+        }        
+      }
+      return clone;
+    };
+
     var originalImportNode = document.importNode;
 
     // clone instead of importing <template>

From 3ff9cdc3f5fa823ac64f24f459e12ecad707eae2 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 10 Feb 2016 15:06:42 -0800
Subject: [PATCH 10/19] Fix safari 9 errors

---
 src/Template/Template.js  |  2 +-
 tests/Template/tests.html | 40 +++++++++++++++++++--------------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index fd79361ff..b4b15d7e6 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -92,7 +92,7 @@ if (typeof HTMLTemplateElement === 'undefined') {
           t = t$[i];
           this.decorate(s);
           t.parentNode.replaceChild(s.cloneNode(true), t);
-        }        
+        }
       }
       return clone;
     };
diff --git a/tests/Template/tests.html b/tests/Template/tests.html
index b8cdfe87c..62f57f2c5 100644
--- a/tests/Template/tests.html
+++ b/tests/Template/tests.html
@@ -71,12 +71,12 @@
           var clone = imp.cloneNode();
           assert.notEqual(clone, imp, 'element is not cloned');
           assert.isDefined(clone.content, 'cloned template content dne');
-          assert.equal(clone.content.childNodes.length, 0, 
+          assert.equal(clone.content.childNodes.length, 0,
               'non-deep cloned template.content is not empty');
           var deepClone = imp.cloneNode(true);
-          assert.equal(deepClone.content.childNodes.length, 1, 
+          assert.equal(deepClone.content.childNodes.length, 1,
               'deep cloned template.content is empty');
-          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
               'cloned content is not different from source');
         });
 
@@ -87,24 +87,24 @@
           var clone = imp.cloneNode();
           assert.notEqual(clone, imp, 'element is not cloned');
           assert.isDefined(clone.content, 'cloned template content dne');
-          assert.equal(clone.content.childNodes.length, 0, 
+          assert.equal(clone.content.childNodes.length, 0,
               'non-deep cloned template.content is not empty');
           var deepClone = imp.cloneNode(true);
-          assert.equal(deepClone.content.childNodes.length, 2, 
+          assert.equal(deepClone.content.childNodes.length, 2,
               'deep cloned template.content is empty');
-          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
               'cloned content is not different from source');
           var nested = deepClone.content.lastChild;
           assert.isDefined(nested.content, 'nested cloned template content dne');
-          assert.equal(nested.content.childNodes.length, 2, 
+          assert.equal(nested.content.childNodes.length, 2,
               'deep cloned template.content is empty');
           nested = nested.content.lastChild;
           assert.isDefined(nested, 'nested cloned template content dne');
-          assert.equal(nested.content.childNodes.length, 2, 
+          assert.equal(nested.content.childNodes.length, 2,
               'deep cloned template.content is empty');
           nested = nested.content.lastChild;
           assert.isDefined(nested, 'nested cloned template content dne');
-          assert.equal(nested.content.childNodes.length, 1, 
+          assert.equal(nested.content.childNodes.length, 1,
               'deep cloned template.content is empty');
         });
 
@@ -112,15 +112,15 @@
           var imp = document.createElement('template');
           var s = '<div>Hi</div>';
           imp.innerHTML = s;
-          var clone = document.importNode(imp);
+          var clone = document.importNode(imp, false);
           assert.notEqual(clone, imp, 'element is not cloned');
           assert.isDefined(clone.content, 'cloned template content dne');
-          assert.equal(clone.content.childNodes.length, 0, 
+          assert.equal(clone.content.childNodes.length, 0,
               'non-deep cloned template.content is not empty');
           var deepClone = document.importNode(imp, true);
-          assert.equal(deepClone.content.childNodes.length, 1, 
+          assert.equal(deepClone.content.childNodes.length, 1,
               'deep cloned template.content is empty');
-          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
               'cloned content is not different from source');
         });
 
@@ -128,27 +128,27 @@
           var imp = document.createElement('template');
           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
           imp.innerHTML = s;
-          var clone = document.importNode(imp);
+          var clone = document.importNode(imp, false);
           assert.notEqual(clone, imp, 'element is not cloned');
           assert.isDefined(clone.content, 'cloned template content dne');
-          assert.equal(clone.content.childNodes.length, 0, 
+          assert.equal(clone.content.childNodes.length, 0,
               'non-deep cloned template.content is not empty');
           var deepClone = document.importNode(imp, true);
-          assert.equal(deepClone.content.childNodes.length, 2, 
+          assert.equal(deepClone.content.childNodes.length, 2,
               'deep cloned template.content is empty');
-          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild, 
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
               'cloned content is not different from source');
           var nested = deepClone.content.lastChild;
           assert.isDefined(nested.content, 'nested cloned template content dne');
-          assert.equal(nested.content.childNodes.length, 2, 
+          assert.equal(nested.content.childNodes.length, 2,
               'deep cloned template.content is empty');
           nested = nested.content.lastChild;
           assert.isDefined(nested, 'nested cloned template content dne');
-          assert.equal(nested.content.childNodes.length, 2, 
+          assert.equal(nested.content.childNodes.length, 2,
               'deep cloned template.content is empty');
           nested = nested.content.lastChild;
           assert.isDefined(nested, 'nested cloned template content dne');
-          assert.equal(nested.content.childNodes.length, 1, 
+          assert.equal(nested.content.childNodes.length, 1,
               'deep cloned template.content is empty');
         });
 

From 178272092ae7013c82a517c4e9b7afe7befc4814 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 10 Feb 2016 15:28:45 -0800
Subject: [PATCH 11/19] Fix cloneNode/importNode for dom that contains
 templates.

---
 src/Template/Template.js  | 40 +++++++++++++++++++--------
 tests/Template/tests.html | 58 +++++++++++++++++++++++++++++++++++++--
 2 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index b4b15d7e6..c954f55c3 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -85,25 +85,43 @@ if (typeof HTMLTemplateElement === 'undefined') {
         clone.content.appendChild(
             nativeCloneNode.call(template.content, true));
         // these two lists should be coincident
-        var s$ = template.content.querySelectorAll(TEMPLATE_TAG);
-        var t$ = clone.content.querySelectorAll(TEMPLATE_TAG);
-        for (var i=0, l=t$.length, t, s; i<l; i++) {
-          s = s$[i];
-          t = t$[i];
-          this.decorate(s);
-          t.parentNode.replaceChild(s.cloneNode(true), t);
-        }
+        this.fixClonedDom(clone.content, template.content);
       }
       return clone;
     };
 
+    HTMLTemplateElement.fixClonedDom = function(clone, source) {
+      var s$ = source.querySelectorAll(TEMPLATE_TAG);
+      var t$ = clone.querySelectorAll(TEMPLATE_TAG);
+      for (var i=0, l=t$.length, t, s; i<l; i++) {
+        s = s$[i];
+        t = t$[i];
+        this.decorate(s);
+        t.parentNode.replaceChild(s.cloneNode(true), t);
+      }
+    };
+
     var originalImportNode = document.importNode;
 
+    Node.prototype.cloneNode = function(deep) {
+      var dom = nativeCloneNode.call(this, deep);
+      if (deep) {
+        HTMLTemplateElement.fixClonedDom(dom, this);
+      }
+      return dom;
+    };
+
     // clone instead of importing <template>
     document.importNode = function(element, deep) {
-      return (element.localName === TEMPLATE_TAG) ?
-        HTMLTemplateElement.cloneNode(element, deep) :
-        originalImportNode.call(document, element, deep);
+      if (element.localName === TEMPLATE_TAG) {
+        return HTMLTemplateElement.cloneNode(element, deep);
+      } else {
+        var dom = originalImportNode.call(document, element, deep);
+        if (deep) {
+          HTMLTemplateElement.fixClonedDom(dom, element);
+        }
+        return dom;
+      }
     };
 
     /**
diff --git a/tests/Template/tests.html b/tests/Template/tests.html
index 62f57f2c5..3c5bcae6f 100644
--- a/tests/Template/tests.html
+++ b/tests/Template/tests.html
@@ -80,7 +80,7 @@
               'cloned content is not different from source');
         });
 
-        test('nested clone', function() {
+        test('clone nested', function() {
           var imp = document.createElement('template');
           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
           imp.innerHTML = s;
@@ -108,6 +108,33 @@
               'deep cloned template.content is empty');
         });
 
+        test('clone node containing templates', function() {
+          var imp = document.createElement('div');
+          var t = document.createElement('template');
+          var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
+          t.innerHTML = s;
+          imp.appendChild(t);
+          var impClone = imp.cloneNode(true);
+          var imp = imp.firstChild;
+          var deepClone = impClone.firstChild;
+          assert.equal(deepClone.content.childNodes.length, 2,
+              'deep cloned template.content is empty');
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
+              'cloned content is not different from source');
+          var nested = deepClone.content.lastChild;
+          assert.isDefined(nested.content, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2,
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2,
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 1,
+              'deep cloned template.content is empty');
+        });
+
         test('importNode', function() {
           var imp = document.createElement('template');
           var s = '<div>Hi</div>';
@@ -124,7 +151,7 @@
               'cloned content is not different from source');
         });
 
-        test('nested importNode', function() {
+        test('importNode: nested', function() {
           var imp = document.createElement('template');
           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
           imp.innerHTML = s;
@@ -152,6 +179,33 @@
               'deep cloned template.content is empty');
         });
 
+        test('importNode: element containing nested templates', function() {
+          var imp = document.createElement('div');
+          var t = document.createElement('template');
+          var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
+          t.innerHTML = s;
+          imp.appendChild(t);
+          var impClone = document.importNode(imp, true);
+          imp = imp.firstChild;
+          var deepClone = impClone.firstChild;
+          assert.equal(deepClone.content.childNodes.length, 2,
+              'deep cloned template.content is empty');
+          assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
+              'cloned content is not different from source');
+          var nested = deepClone.content.lastChild;
+          assert.isDefined(nested.content, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2,
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 2,
+              'deep cloned template.content is empty');
+          nested = nested.content.lastChild;
+          assert.isDefined(nested, 'nested cloned template content dne');
+          assert.equal(nested.content.childNodes.length, 1,
+              'deep cloned template.content is empty');
+        });
+
       });
     </script>
   </body>

From 1428b008af415c0c0277aeee61480fc83b4e34ce Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 10 Feb 2016 15:44:46 -0800
Subject: [PATCH 12/19] Fix implementations with broken
 template.clone/importNode

---
 src/Template/Template.js | 151 +++++++++++++++++++++++----------------
 1 file changed, 88 insertions(+), 63 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index c954f55c3..b3b11ee62 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -9,10 +9,24 @@
  */
 
 // minimal template polyfill
-if (typeof HTMLTemplateElement === 'undefined') {
-  (function() {
+(function() {
+  var needsTemplate = (typeof HTMLTemplateElement === 'undefined');
+
+  // returns true if nested templates can be cloned (they cannot be on 
+  // some impl's like Safari 8)
+  var needsCloning = (function() {
+    if (!needsTemplate) {
+      var t = document.createElement('template');
+      t.innerHTML = '<div></div>';
+      var clone = t.cloneNode(true);
+      return (clone.content.childNodes.length === 0);
+    }
+  })();
+
+  var TEMPLATE_TAG = 'template';
+  var TemplateImpl = function() {};
 
-    var TEMPLATE_TAG = 'template';
+  if (needsTemplate) {
 
     var contentDoc = document.implementation.createHTMLDocument('template');
     var canDecorate = true;
@@ -20,14 +34,14 @@ if (typeof HTMLTemplateElement === 'undefined') {
     /**
       Provides a minimal shim for the <template> element.
     */
-    HTMLTemplateElement = function() {};
-    HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype);
+    
+    TemplateImpl.prototype = Object.create(HTMLElement.prototype);
 
     /**
       The `decorate` method moves element children to the template's `content`.
       NOTE: there is no support for dynamically adding elements to templates.
     */
-    HTMLTemplateElement.decorate = function(template) {
+    TemplateImpl.decorate = function(template) {
       // if the template is decorated, return fast
       if (template.content) {
         return;
@@ -51,7 +65,7 @@ if (typeof HTMLTemplateElement === 'undefined') {
             },
             set: function(text) {
               contentDoc.body.innerHTML = text;
-              HTMLTemplateElement.bootstrap(contentDoc);
+              TemplateImpl.bootstrap(contentDoc);
               while (this.content.firstChild) {
                 this.content.removeChild(this.content.firstChild);
               }
@@ -63,7 +77,7 @@ if (typeof HTMLTemplateElement === 'undefined') {
           });
 
           template.cloneNode = function(deep) {
-            return HTMLTemplateElement.cloneNode(this, deep);
+            return TemplateImpl.cloneNode(this, deep);
           };
 
         } catch (err) {
@@ -71,14 +85,65 @@ if (typeof HTMLTemplateElement === 'undefined') {
         }
       }
       // bootstrap recursively
-      HTMLTemplateElement.bootstrap(template.content);
+      TemplateImpl.bootstrap(template.content);
+    };
+
+    /**
+      The `bootstrap` method is called automatically and "fixes" all
+      <template> elements in the document referenced by the `doc` argument.
+    */
+    TemplateImpl.bootstrap = function(doc) {
+      var templates = doc.querySelectorAll(TEMPLATE_TAG);
+      for (var i=0, l=templates.length, t; (i<l) && (t=templates[i]); i++) {
+        TemplateImpl.decorate(t);
+      }
     };
 
+    // auto-bootstrapping for main document
+    document.addEventListener('DOMContentLoaded', function() {
+      TemplateImpl.bootstrap(document);
+    });
+
+    // Patch document.createElement to ensure newly created templates have content
+    var createElement = document.createElement;
+    document.createElement = function() {
+      'use strict';
+      var el = createElement.apply(document, arguments);
+      if (el.localName == 'template') {
+        TemplateImpl.decorate(el);
+      }
+      return el;
+    };
+
+    var escapeDataRegExp = /[&\u00A0<>]/g;
+
+    function escapeReplace(c) {
+      switch (c) {
+        case '&':
+          return '&amp;';
+        case '<':
+          return '&lt;';
+        case '>':
+          return '&gt;';
+        case '\u00A0':
+          return '&nbsp;';
+      }
+    }
+
+    function escapeData(s) {
+      return s.replace(escapeDataRegExp, escapeReplace);
+    }
+  }
+
+  // make cloning/importing work!
+  if (needsTemplate || needsCloning) {
     var nativeCloneNode = Node.prototype.cloneNode;
 
-    HTMLTemplateElement.cloneNode = function(template, deep) {
+    TemplateImpl.cloneNode = function(template, deep) {
       var clone = nativeCloneNode.call(template);
-      this.decorate(clone);
+      if (this.decorate) {
+        this.decorate(clone);
+      }
       if (deep) {
         // NOTE: use native clone node to make sure CE's wrapped
         // cloneNode does not cause elements to upgrade.
@@ -90,13 +155,15 @@ if (typeof HTMLTemplateElement === 'undefined') {
       return clone;
     };
 
-    HTMLTemplateElement.fixClonedDom = function(clone, source) {
+    TemplateImpl.fixClonedDom = function(clone, source) {
       var s$ = source.querySelectorAll(TEMPLATE_TAG);
       var t$ = clone.querySelectorAll(TEMPLATE_TAG);
       for (var i=0, l=t$.length, t, s; i<l; i++) {
         s = s$[i];
         t = t$[i];
-        this.decorate(s);
+        if (this.decorate) {
+          this.decorate(s);
+        }
         t.parentNode.replaceChild(s.cloneNode(true), t);
       }
     };
@@ -106,7 +173,7 @@ if (typeof HTMLTemplateElement === 'undefined') {
     Node.prototype.cloneNode = function(deep) {
       var dom = nativeCloneNode.call(this, deep);
       if (deep) {
-        HTMLTemplateElement.fixClonedDom(dom, this);
+        TemplateImpl.fixClonedDom(dom, this);
       }
       return dom;
     };
@@ -114,61 +181,19 @@ if (typeof HTMLTemplateElement === 'undefined') {
     // clone instead of importing <template>
     document.importNode = function(element, deep) {
       if (element.localName === TEMPLATE_TAG) {
-        return HTMLTemplateElement.cloneNode(element, deep);
+        return TemplateImpl.cloneNode(element, deep);
       } else {
         var dom = originalImportNode.call(document, element, deep);
         if (deep) {
-          HTMLTemplateElement.fixClonedDom(dom, element);
+          TemplateImpl.fixClonedDom(dom, element);
         }
         return dom;
       }
     };
+  }
 
-    /**
-      The `bootstrap` method is called automatically and "fixes" all
-      <template> elements in the document referenced by the `doc` argument.
-    */
-    HTMLTemplateElement.bootstrap = function(doc) {
-      var templates = doc.querySelectorAll(TEMPLATE_TAG);
-      for (var i=0, l=templates.length, t; (i<l) && (t=templates[i]); i++) {
-        HTMLTemplateElement.decorate(t);
-      }
-    };
-
-    // auto-bootstrapping for main document
-    document.addEventListener('DOMContentLoaded', function() {
-      HTMLTemplateElement.bootstrap(document);
-    });
-
-    // Patch document.createElement to ensure newly created templates have content
-    var createElement = document.createElement;
-    document.createElement = function() {
-      'use strict';
-      var el = createElement.apply(document, arguments);
-      if (el.localName == 'template') {
-        HTMLTemplateElement.decorate(el);
-      }
-      return el;
-    };
-
-    var escapeDataRegExp = /[&\u00A0<>]/g;
-
-    function escapeReplace(c) {
-      switch (c) {
-        case '&':
-          return '&amp;';
-        case '<':
-          return '&lt;';
-        case '>':
-          return '&gt;';
-        case '\u00A0':
-          return '&nbsp;';
-      }
-    }
-
-    function escapeData(s) {
-      return s.replace(escapeDataRegExp, escapeReplace);
-    }
+  if (needsTemplate) {
+    HTMLTemplateElement = TemplateImpl;
+  }
 
-  })();
-}
+})();
\ No newline at end of file

From 95c52bd2e965a563c7ac400bcfe606634dfdedd7 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 10 Feb 2016 15:52:32 -0800
Subject: [PATCH 13/19] Use a nested template check to see if template cloning
 is broken.

---
 src/Template/Template.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index b3b11ee62..0cd7ada13 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -17,9 +17,9 @@
   var needsCloning = (function() {
     if (!needsTemplate) {
       var t = document.createElement('template');
-      t.innerHTML = '<div></div>';
+      t.innerHTML = '<template><div></div></template>';
       var clone = t.cloneNode(true);
-      return (clone.content.childNodes.length === 0);
+      return (clone.content.firstChild.content.childNodes.length == 0);
     }
   })();
 

From 0c3af19500c5c95e26219a043476710c496c8e7a Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 10 Feb 2016 16:40:36 -0800
Subject: [PATCH 14/19] Fix test for Safari template.

---
 src/Template/Template.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index 0cd7ada13..bc4a7b55a 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -16,10 +16,12 @@
   // some impl's like Safari 8)
   var needsCloning = (function() {
     if (!needsTemplate) {
+      var frag = document.createDocumentFragment();
       var t = document.createElement('template');
-      t.innerHTML = '<template><div></div></template>';
-      var clone = t.cloneNode(true);
-      return (clone.content.firstChild.content.childNodes.length == 0);
+      frag.appendChild(t);
+      t.content.appendChild(document.createElement('div'));
+      var clone = frag.cloneNode(true);
+      return (clone.firstChild.content.childNodes.length === 0);
     }
   })();
 

From 2a334a8c425c07b7a4caf74854273eb7b73cd358 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 10 Feb 2016 16:58:06 -0800
Subject: [PATCH 15/19] Add template.cloneNode override when needed.

---
 src/Template/Template.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index bc4a7b55a..45e4983a0 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -192,6 +192,13 @@
         return dom;
       }
     };
+
+    if (needsCloning) {
+      HTMLTemplateElement.prototype.cloneNode = function(deep) {
+        return TemplateImpl.cloneNode(this, deep);
+      };
+    }
+    
   }
 
   if (needsTemplate) {

From 04527ce20e38c88e00f555bf11d0e6b0c0687570 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 10 Feb 2016 18:03:52 -0800
Subject: [PATCH 16/19] Add comments and test for ownerDoc.

---
 src/Template/Template.js  | 21 +++++++++++++++++++--
 tests/Template/tests.html | 15 +++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/Template/Template.js b/src/Template/Template.js
index 45e4983a0..a2c4d094b 100644
--- a/src/Template/Template.js
+++ b/src/Template/Template.js
@@ -139,10 +139,16 @@
 
   // make cloning/importing work!
   if (needsTemplate || needsCloning) {
+    // NOTE: we rely on this cloneNode not causing element upgrade.
+    // This means this polyfill must load before the CE polyfill and
+    // this would need to be re-worked if a browser supports native CE
+    // but not <template>.
     var nativeCloneNode = Node.prototype.cloneNode;
 
     TemplateImpl.cloneNode = function(template, deep) {
       var clone = nativeCloneNode.call(template);
+      // NOTE: decorate doesn't auto-fix children because they are already
+      // decorated so they need special clone fixup.
       if (this.decorate) {
         this.decorate(clone);
       }
@@ -151,13 +157,17 @@
         // cloneNode does not cause elements to upgrade.
         clone.content.appendChild(
             nativeCloneNode.call(template.content, true));
-        // these two lists should be coincident
+        // now ensure nested templates are cloned correctly.
         this.fixClonedDom(clone.content, template.content);
       }
       return clone;
     };
 
+    // Given a source and cloned subtree, find <template>'s in the cloned 
+    // subtree and replace them with cloned <template>'s from source.
+    // We must do this because only the source templates have proper .content.
     TemplateImpl.fixClonedDom = function(clone, source) {
+      // these two lists should be coincident
       var s$ = source.querySelectorAll(TEMPLATE_TAG);
       var t$ = clone.querySelectorAll(TEMPLATE_TAG);
       for (var i=0, l=t$.length, t, s; i<l; i++) {
@@ -172,15 +182,22 @@
 
     var originalImportNode = document.importNode;
 
+    // override all cloning to fix the cloned subtree to contain properly
+    // cloned templates.
     Node.prototype.cloneNode = function(deep) {
       var dom = nativeCloneNode.call(this, deep);
+      // template.content is cloned iff `deep`.
       if (deep) {
         TemplateImpl.fixClonedDom(dom, this);
       }
       return dom;
     };
 
-    // clone instead of importing <template>
+    // NOTE: we are cloning instead of importing <template>'s.
+    // However, the ownerDocument of the cloned template will be correct!
+    // This is because the native import node creates the right document owned 
+    // subtree and `fixClonedDom` inserts cloned templates into this subtree,
+    // thus updating the owner doc.
     document.importNode = function(element, deep) {
       if (element.localName === TEMPLATE_TAG) {
         return TemplateImpl.cloneNode(element, deep);
diff --git a/tests/Template/tests.html b/tests/Template/tests.html
index 3c5bcae6f..15686aabe 100644
--- a/tests/Template/tests.html
+++ b/tests/Template/tests.html
@@ -206,6 +206,21 @@
               'deep cloned template.content is empty');
         });
 
+        test('importNode: templates have proper owner document', function() {
+          var doc = document.implementation.createHTMLDocument('');
+          var imp = doc.createElement('div');
+          var t = doc.createElement('template');
+          var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
+          t.innerHTML = s;
+          imp.appendChild(t);
+          var impClone = document.importNode(imp, true);
+          imp = imp.firstChild;
+          var deepClone = impClone.firstChild;
+          assert.notEqual(imp.ownerDocument, document);
+          assert.equal(impClone.ownerDocument, document);
+          assert.equal(deepClone.ownerDocument, document);
+        });
+
       });
     </script>
   </body>

From 5e719db8691fbb682c5c613a0a12593e767b1615 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 18 Feb 2016 16:16:19 -0800
Subject: [PATCH 17/19] Remove old tests

---
 tests/Template/html/Template.html | 72 -------------------------------
 1 file changed, 72 deletions(-)
 delete mode 100644 tests/Template/html/Template.html

diff --git a/tests/Template/html/Template.html b/tests/Template/html/Template.html
deleted file mode 100644
index f3379b42b..000000000
--- a/tests/Template/html/Template.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!doctype html>
-<!--
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-  <head>
-    <title>Template Test</title>
-    <script src="../../tools/htmltest.js"></script>
-    <script src="../../tools/chai/chai.js"></script>
-    <script src="../../../src/Template/Template.js"></script>
-  </head>
-  <body>
-    <template>
-      <span id="content">Hello World!</span>
-    </template>
-
-    <script>
-      addEventListener('DOMContentLoaded', function() {
-        var template = document.querySelector('template');
-        chai.assert.equal(template.childNodes.length, 0, 'template children evacipated');
-        chai.assert.isDefined(template.content, 'template content exists');
-        chai.assert.equal(template.content.childNodes.length, 3, 'template content has expected number of nodes');
-        var content = document.querySelector('#content');
-        chai.assert.isNull(content, 'template content not in document');
-        document.body.appendChild(document.importNode(template.content, true));
-        content = document.querySelector('#content');
-        chai.assert.isDefined(content, 'template content stamped into document');
-        var imp = document.createElement('template');
-        window.imp = imp;
-        chai.assert.equal(imp.innerHTML, '');
-
-        var s = 'pre<div>Hi</div><div>Bye</div>post';
-        imp.innerHTML = s;
-        chai.assert.equal(imp.innerHTML, s);
-        chai.assert.equal(imp.content.childNodes.length, 4);
-        chai.assert.equal(imp.content.firstChild.textContent, 'pre');
-        s = 'foo';
-        imp.innerHTML = s;
-        chai.assert.equal(imp.innerHTML, s);
-        chai.assert.equal(imp.content.childNodes.length, 1);
-        chai.assert.equal(imp.content.firstChild.textContent, s);
-
-        s = 'pre<template><div id="inert"></div></template>post';
-        imp.innerHTML = s;
-        // NOTE: we don't support reading nested template content via innerHTML,
-        // only setting it, hence the following won't work:
-        // chai.assert.equal(imp.innerHTML, s);
-        chai.assert.equal(imp.content.childNodes.length, 3);
-        chai.assert.equal(imp.content.childNodes[0].textContent, 'pre');
-        chai.assert.equal(imp.content.childNodes[1].content.childNodes.length, 1);
-        chai.assert.equal(imp.content.childNodes[1].content.firstChild.id, 'inert');
-        chai.assert.equal(imp.content.childNodes[2].textContent, 'post');
-
-        s = '-<->-"-&-';
-        var escaped = '-&lt;-&gt;-"-&amp;-';
-        var div = document.createElement('div');
-        div.innerHTML = s
-        imp.innerHTML = s;
-        // innerHTML is properly escaped
-        chai.assert.equal(imp.innerHTML, escaped);
-        chai.assert.equal(imp.content.childNodes.length, div.childNodes.length);
-        done();
-      });
-    </script>
-  </body>
-</html>

From f33444f0decb70fa218e7f58b2c411c32c95a7fc Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 18 Feb 2016 16:22:09 -0800
Subject: [PATCH 18/19] [ci skip] move test up

---
 tests/Template/tests.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/Template/tests.html b/tests/Template/tests.html
index 426ee1122..1c9a2c2e6 100644
--- a/tests/Template/tests.html
+++ b/tests/Template/tests.html
@@ -37,6 +37,12 @@
           template = document.querySelector('template');
         });
 
+        test('No rendering', function() {
+          var bcr = template.getBoundingClientRect();
+          assert.equal(bcr.height, 0);
+          assert.equal(bcr.width, 0);
+        });
+
         test('content', function() {
           assert.equal(template.childNodes.length, 0, 'template children evacipated');
           assert.isDefined(template.content, 'template content exists');
@@ -75,12 +81,6 @@
           assert.equal(imp.content.textContent, div.textContent);
         });
 
-        test('No rendering', function() {
-          var bcr = template.getBoundingClientRect();
-          assert.equal(bcr.height, 0);
-          assert.equal(bcr.width, 0);
-        });
-
         test('clone', function() {
           var imp = document.createElement('template');
           var s = '<div>Hi</div>';

From b76bfaa6b1b2d691745b8d38b3f242e8f17490d5 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 18 Feb 2016 16:55:40 -0800
Subject: [PATCH 19/19] prepare for release v0.7.21

---
 bower.json   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index 8bcb0c1c9..7603c35ef 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "webcomponentsjs",
   "main": "webcomponents.js",
-  "version": "0.7.20",
+  "version": "0.7.21",
   "homepage": "http://webcomponents.org",
   "authors": [
     "The Polymer Authors"
diff --git a/package.json b/package.json
index c1262d7d2..a67097631 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webcomponents.js",
-  "version": "0.7.20",
+  "version": "0.7.21",
   "description": "webcomponents.js",
   "main": "webcomponents.js",
   "directories": {