Render across <template> element boundaries

src/template-instance.ts

@@ -8,7 +8,11 @@ function* collectParts(el: DocumentFragment): Generator<TemplatePart> {
   const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, null)
   let node
   while ((node = walker.nextNode())) {
-    if (node instanceof Element && node.hasAttributes()) {
+    if (node instanceof HTMLTemplateElement) {
+      for (const part of collectParts(node.content)) {
+        yield part
+      }
+    } else if (node instanceof Element && node.hasAttributes()) {
       for (let i = 0; i < node.attributes.length; i += 1) {
         const attr = node.attributes.item(i)
         if (attr && attr.value.includes('{{')) {

test/template-instance.ts

@@ -27,6 +27,15 @@ describe('template-instance', () => {
     root.appendChild(instance)
     expect(root.innerHTML).to.equal(`<div>Hello world</div>`)
   })
+  it('applies data to nested templated element nodes', () => {
+    const root = document.createElement('div')
+    const template = Object.assign(document.createElement('template'), {
+      innerHTML: '<template><div>{{x}}</div></template>',
+    })
+    root.appendChild(new TemplateInstance(template, {x: 'Hello world'}))
+
+    expect(root.innerHTML).to.equal('<template><div>Hello world</div></template>')
+  })
   it('can render into partial text nodes', () => {
     const template = document.createElement('template')
     const originalHTML = `Hello {{x}}!`