fix: reuse DOM nodes inside <template> during hydration

Author: frontman-git

src/diff/children.js

@@ -53,6 +53,13 @@ export function diffChildren(
 	isHydrating,
 	refQueue
 ) {
+	if (
+		parentDom instanceof DocumentFragment &&
+		newParentVNode.type === 'template' &&
+		excessDomChildren?.length === 0
+	) {
+		excessDomChildren = Array.from(parentDom.childNodes);
+	}
 	let i,
 		/** @type {VNode} */
 		oldVNode,

test/browser/render.test.js

@@ -2013,4 +2013,11 @@ describe('render()', () => {
 		render(<App />, scratch);
 		expect(scratch.innerHTML).to.equal('hello world');
 	});
+	it('should hydrate <template> tags ', () => {
+		const App = () => <template><h1>it works</h1></template>		
+		scratch.innerHTML = `<template><h1>it works</h1></template>`
+
+		render(<App />, scratch);
+		expect(scratch.innerHTML).to.equal(`<template><h1>it works</h1></template>`)
+	});
 });