IE11 support

Author: justinfagnani

src/lit-html.ts

@@ -337,17 +337,23 @@ export class Template {
         // We have a part for each match found
         partIndex += lastIndex;
 
-        // We keep this current node, but reset its content to the last
-        // literal part. We insert new literal nodes before this so that the
-        // tree walker keeps its position correctly.
-        node.textContent = strings[lastIndex];
-
         // Generate a new text node for each literal section
         // These nodes are also used as the markers for node parts
         for (let i = 0; i < lastIndex; i++) {
-          parent.insertBefore(document.createTextNode(strings[i]), node);
+          console.log(parent.nodeName);
+          parent.insertBefore(
+              (strings[i] === '')
+                  ? document.createComment('')
+                  : document.createTextNode(strings[i]),
+              node);
           this.parts.push(new TemplatePart('node', index++));
         }
+        parent.insertBefore(
+            strings[lastIndex] === '' ?
+                document.createComment('') :
+                document.createTextNode(strings[lastIndex]),
+            node);
+        nodesToRemove.push(node);
       } else if (
           node.nodeType === 8 /* Node.COMMENT_NODE */ &&
           node.nodeValue === marker) {
@@ -365,7 +371,7 @@ export class Template {
         const previousSibling = node.previousSibling;
         if (previousSibling === null || previousSibling !== previousNode ||
             previousSibling.nodeType !== Node.TEXT_NODE) {
-          parent.insertBefore(document.createTextNode(''), node);
+          parent.insertBefore(document.createComment(''), node);
         } else {
           index--;
         }
@@ -375,7 +381,7 @@ export class Template {
         // We don't have to check if the next node is going to be removed,
         // because that node will induce a new marker if so.
         if (node.nextSibling === null) {
-          parent.insertBefore(document.createTextNode(''), node);
+          parent.insertBefore(document.createComment(''), node);
         } else {
           index--;
         }
@@ -738,7 +744,19 @@ export class TemplateInstance {
           index++;
           walker.nextNode();
         }
-        this._parts.push(this._partCallback(this, part, walker.currentNode));
+        let node = walker.currentNode;
+        // Swap the comment placeholders for empty text nodes
+        // The nextSibling of the part placeholder is the part endNode
+        if (node.nextSibling !== null && node.nextSibling!.nodeType === 8) {
+          node.parentNode!.replaceChild(document.createTextNode(''), node.nextSibling!);
+        }
+        // The part placeholder is the part startNode
+        if (node.nodeType === 8) {
+          node = document.createTextNode('');
+          walker.currentNode.parentNode!.replaceChild(node, walker.currentNode);
+          walker.currentNode = node;
+        }
+        this._parts.push(this._partCallback(this, part, node));
       }
     }
     return fragment;

src/test/lit-html_test.ts

@@ -525,6 +525,37 @@ suite('lit-html', () => {
           </div>`);
       });
 
+      test('render style tags with expressions correctly', () => {
+        const color = 'red';
+        const t = html`
+          <style>
+            h1: {
+              color: ${color};
+            }
+          </style>`;
+        render(t, container);
+        assert.equal(container.innerHTML, `
+          <style>
+            h1: {
+              color: red;
+            }
+          </style>`);
+      });
+
+      test('renders an attribute after empty style node binding', () => {
+        // This test is sensitive to the exact binding in the style tag.
+        // Make sure the binding takes up the whole element with no text
+        // on either side of it
+        render(html`
+            <style>${'bar'}</style>
+            <a href="/buy/${'foo'}"></a>
+          `, container);
+          assert.equal(container.innerHTML, `
+            <style>bar</style>
+            <a href="/buy/foo"></a>
+          `);
+      });
+
       test('renders expressions with preceding elements', () => {
         render(html`<a>${'foo'}</a>${html`<h1>${'bar'}</h1>`}`, container);
         assert.equal(container.innerHTML, '<a>foo</a><h1>bar</h1>');
@@ -563,6 +594,20 @@ suite('lit-html', () => {
         container = document.createElement('div');
       });
 
+      test('sanity check one', () => {
+        // bump line numbers
+        const foo = 'aaa';
+
+        const t = () => html`<div>${foo}</div>`;
+
+        render(t(), container);
+        assert.equal(container.innerHTML, '<div>aaa</div>');
+        const text = container.firstChild!.childNodes[1] as Text;
+        text.textContent = 'bbb';
+        render(t(), container);
+        assert.equal(container.innerHTML, '<div>bbb</div>');
+      });
+
       test('dirty checks simple values', () => {
         const foo = 'aaa';
 
@@ -573,7 +618,7 @@ suite('lit-html', () => {
         const text = container.firstChild!.childNodes[1] as Text;
         assert.equal(text.textContent, 'aaa');
 
-        // Set textContent manually. Since lit-html doesn't dirty checks against
+        // Set textContent manually. Since lit-html doesn't dirty check against
         // actual DOM, but again previous part values, this modification should
         // persist through the next render with the same value.
         text.textContent = 'bbb';

test/shady.html

@@ -4,11 +4,11 @@
     <script>
       window.ShadyDOM = {force: true};
     </script>
+    <script src="../node_modules/babel-polyfill/dist/polyfill.min.js"></script>
     <script src="../node_modules/wct-browser-legacy/browser.js"></script>
     <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
     <script src="../node_modules/@webcomponents/shadycss/scoping-shim.min.js"></script>
     <script src="../node_modules/@webcomponents/template/template.js"></script>
-    <script src="../node_modules/babel-polyfill/dist/polyfill.min.js"></script>
   </head>
   <body>
     <script type="module" src="./lib/shady-render_test.js"></script>