Skip to content

Out of Order Streaming using Declarative Shadow DOM

• ~1 min read

A new technique that requires no JavaScript

Saw this tweet from @passle_ and thought this was pretty dang clever. He goes on to explain the relatively simple technique:

<html>
	<body>
		<template shadowrootmode="open">
			<h1>Hello world</h1>
			<slot name="id-1">
				Loading...
			</slot>
			<footer>Copyright</footer>
		</template>
		<div slot="id-1">
			Content loaded!
		</div>
	</body>
</html>

So, when the HTML document above is streaming into the browser, the children of <slot name="id-1"> will be displayed until the <div slot="id-1"> is streamed in! How cool is that?

Share this post

📧 Email