When using server-side rendering, the template HTML seems to throw a hydration error. Not sure if it's related to how the browser processes template elements or how React is correcting the dom. I have tested this with Astro and Nextjs and have had the same error. The Template element is part of the HTML spec and should work https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template

Use case might be for shareable web components used in React.

React version: React 19.1, 19.2

Steps To Reproduce

1. Have a component which includes template element with elements inside.
2. Render it server side and wait for hydration error should be triggered

Link to code example:

'use client';
export function Template() {
	return <template>hello</template>;
}

export default function Home() {
	return (
		<main>
			<section className='container mx-auto grid lg:grid-cols-4'>
				<div className='flex flex-col py-8 lg:col-span-3'>
					<Template />
				</div>
			</section>
		</main>
	);
}

The current behavior

Results in Error:

Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Text content did not match. Server: "" Client: "hello"

The expected behavior

Template HTML element is a part of the HTML spec and should not cause hydration errors.