diff --git a/src/processors.ts b/src/processors.ts index 1115516..1f47ec0 100644 --- a/src/processors.ts +++ b/src/processors.ts @@ -19,7 +19,7 @@ export function createProcessor(processPart: PartProcessor): TemplateTypeInit { } export function processPropertyIdentity(part: TemplatePart, value: unknown): void { - part.value = value instanceof Element ? value : String(value) + part.value = value instanceof Node ? value : String(value) } export function processBooleanAttribute(part: TemplatePart, value: unknown): boolean { diff --git a/src/types.ts b/src/types.ts index a5c2520..116cea6 100644 --- a/src/types.ts +++ b/src/types.ts @@ -2,7 +2,7 @@ import type {TemplateInstance} from './template-instance.js' export interface TemplatePart { expression: string - value: Element | string | null + value: Node | string | null } type TemplateProcessCallback = (instance: TemplateInstance, parts: Iterable, params: unknown) => void diff --git a/test/template-instance.ts b/test/template-instance.ts index 55096de..5b5ba07 100644 --- a/test/template-instance.ts +++ b/test/template-instance.ts @@ -36,6 +36,19 @@ describe('template-instance', () => { expect(root.innerHTML).to.equal('') }) + it('applies data to templated DocumentFragment nodes', () => { + const template = document.createElement('template') + const fragment = Object.assign(document.createElement('template'), { + innerHTML: '
Hello world
', + }) + const originalHTML = `{{x}}` + template.innerHTML = originalHTML + const instance = new TemplateInstance(template, {x: fragment.content}) + expect(template.innerHTML).to.equal(originalHTML) + const root = document.createElement('div') + root.appendChild(instance) + expect(root.innerHTML).to.equal(`
Hello world
`) + }) it('can render into partial text nodes', () => { const template = document.createElement('template') const originalHTML = `Hello {{x}}!`