Merge pull request #370 from arv/template-inner-html

innerHTML was not working correctly for HTMLTemplateElement

Author: dfreedm

src/wrappers/HTMLElement.js

@@ -15,6 +15,7 @@
   var snapshotNodeList = scope.snapshotNodeList;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
+  var wrappers = scope.wrappers;
 
   /////////////////////////////////////////////////////////////////////////////
   // innerHTML and outerHTML
@@ -116,6 +117,9 @@
   }
 
   function getInnerHTML(node) {
+    if (node instanceof wrappers.HTMLTemplateElement)
+      node = node.content;
+
     var s = '';
     for (var child = node.firstChild; child; child = child.nextSibling) {
       s += getOuterHTML(child, node);
@@ -138,15 +142,14 @@
   var oldIe = /MSIE/.test(navigator.userAgent);
 
   var OriginalHTMLElement = window.HTMLElement;
+  var OriginalHTMLTemplateElement = window.HTMLTemplateElement;
 
   function HTMLElement(node) {
     Element.call(this, node);
   }
   HTMLElement.prototype = Object.create(Element.prototype);
   mixin(HTMLElement.prototype, {
     get innerHTML() {
-      // TODO(arv): This should fallback to this.impl.innerHTML if there
-      // are no shadow trees below or above the context node.
       return getInnerHTML(this);
     },
     set innerHTML(value) {
@@ -163,10 +166,22 @@
 
       var removedNodes = snapshotNodeList(this.childNodes);
 
-      if (this.invalidateShadowRenderer())
-        setInnerHTML(this, value, this.tagName);
-      else
+      if (this.invalidateShadowRenderer()) {
+        if (this instanceof wrappers.HTMLTemplateElement)
+          setInnerHTML(this.content, value);
+        else
+          setInnerHTML(this, value, this.tagName);
+
+      // If we have a non native template element we need to handle this
+      // manually since setting impl.innerHTML would add the html as direct
+      // children and not be moved over to the content fragment.
+      } else if (!OriginalHTMLTemplateElement &&
+                 this instanceof wrappers.HTMLTemplateElement) {
+        setInnerHTML(this.content, value);
+      } else {
         this.impl.innerHTML = value;
+      }
+
       var addedNodes = snapshotNodeList(this.childNodes);
 
       enqueueMutation(this, 'childList', {

src/wrappers/HTMLTemplateElement.js

@@ -6,10 +6,8 @@
   'use strict';
 
   var HTMLElement = scope.wrappers.HTMLElement;
-  var getInnerHTML = scope.getInnerHTML;
   var mixin = scope.mixin;
   var registerWrapper = scope.registerWrapper;
-  var setInnerHTML = scope.setInnerHTML;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
 
@@ -62,13 +60,6 @@
       return contentTable.get(this);
     },
 
-    get innerHTML() {
-      return getInnerHTML(this.content);
-    },
-    set innerHTML(value) {
-      setInnerHTML(this.content, value);
-    }
-
     // TODO(arv): cloneNode needs to clone content.
 
   });

test/js/HTMLTemplateElement.js

@@ -36,6 +36,18 @@ suite('HTML Template Element', function() {
     var template = div.firstChild;
 
     assert.equal(template.innerHTML, '<a></a><b></b>');
+
+    assert.equal(div.innerHTML, '<template><a></a><b></b></template>');
+  });
+
+  test('get outerHTML', function() {
+    var div = document.createElement('div');
+    div.innerHTML = '<template><a></a><b></b></template>';
+    var template = div.firstChild;
+
+    assert.equal(template.outerHTML, '<template><a></a><b></b></template>');
+    assert.equal(div.outerHTML,
+                 '<div><template><a></a><b></b></template></div>');
   });
 
   test('set innerHTML', function() {