diff --git a/src/diff/children.js b/src/diff/children.js
index 7f401a0373..422000b1ba 100644
--- a/src/diff/children.js
+++ b/src/diff/children.js
@@ -8,9 +8,10 @@ import {
 	UNDEFINED,
 	NULL
 } from '../constants';
-import { isArray } from '../util';
+import { isArray, slice } from '../util';
 import { getDomSibling } from '../component';
 
+
 /**
  * @typedef {import('../internal').ComponentChildren} ComponentChildren
  * @typedef {import('../internal').Component} Component
@@ -53,6 +54,13 @@ export function diffChildren(
 	isHydrating,
 	refQueue
 ) {
+	if (
+		newParentVNode.type === 'template' &&
+		excessDomChildren?.length === 0 &&
+		parentDom instanceof DocumentFragment
+	) {
+		excessDomChildren = slice.call(parentDom.childNodes);
+	}
 	let i,
 		/** @type {VNode} */
 		oldVNode,
diff --git a/test/browser/render.test.js b/test/browser/render.test.js
index 95444aa8ba..fd4517360b 100644
--- a/test/browser/render.test.js
+++ b/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>`);
+	});
 });