[lit-html] Empty ShadowDOM for lit-html-rendered HTML

[t2ym]

[lit-html] Empty ShadowDOM for lit-html-rendered HTML

Root Cause

• Failed to pick up the first text node of the format element in local DOM due to the surrounding comment nodes rendered by lit-html

Reproducible Code

• Comments in parameter nodes are not harmful

<i18n-format>
  <span><!-- -->ja 時刻: {1}:{2}<!-- --></span>
  <span slot="1"><!-- -->8<!-- --></span>
  <span slot="2"><!-- -->58<!-- --></span>
</i18n-format>

Fix

• Pick up the first text node instead of the first childNode

diff --git a/i18n-format.js b/i18n-format.js
index d0f53a4..7dd3278 100644
--- a/i18n-format.js
+++ b/i18n-format.js
@@ -295,7 +295,15 @@ Polymer({
     for (n = 0; n < this.elements.length; n++) {
       if (n === 0) {
         this.templateElement = this.elements[n];
-        this.templateTextNode = dom(this.templateElement).childNodes[0];
+        let i = 0;
+        do {
+          this.templateTextNode = dom(this.templateElement).childNodes[i++];
+          if (!this.templateTextNode) {
+            this.templateTextNode = dom(this.templateElement).childNodes[0];
+            break;
+          }
+        }
+        while (this.templateTextNode.nodeType !== this.templateTextNode.TEXT_NODE);
         this.observer.observe(this.templateTextNode, { characterData: true });
       }
       else {