3 files changed, 17 insertions, 5 deletions
diff --git a/packages/integrations/preact/client.js b/packages/integrations/preact/client.js
index 12c5666df..e2f4ca803 100644
--- a/packages/integrations/preact/client.js
+++ b/packages/integrations/preact/client.js
@@ -1,8 +1,11 @@
 import { h, render } from 'preact';
 import StaticHtml from './static-html.js';
 
-export default (element) => (Component, props, children) => {
+export default (element) => (Component, props, { default: children, ...slotted }) => {
 	if (!element.hasAttribute('ssr')) return;
+	for (const [key, value] of Object.entries(slotted)) {
+		props[key] = h(StaticHtml, { value, name: key });
+	}
 	render(
 		h(Component, props, children != null ? h(StaticHtml, { value: children }) : children),
 		element
diff --git a/packages/integrations/preact/server.js b/packages/integrations/preact/server.js
index 0729f42e9..31f980aa3 100644
--- a/packages/integrations/preact/server.js
+++ b/packages/integrations/preact/server.js
@@ -2,6 +2,8 @@ import { h, Component as BaseComponent } from 'preact';
 import render from 'preact-render-to-string';
 import StaticHtml from './static-html.js';
 
+const slotName = str => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+
 function check(Component, props, children) {
 	if (typeof Component !== 'function') return false;
 
@@ -24,9 +26,16 @@ function check(Component, props, children) {
 	}
 }
 
-function renderToStaticMarkup(Component, props, children) {
+function renderToStaticMarkup(Component, props, { default: children, ...slotted }) {
+	const slots = {};
+	for (const [key, value] of Object.entries(slotted)) {
+		const name = slotName(key);
+		slots[name] = h(StaticHtml, { value, name });
+	}
+	// Note: create newProps to avoid mutating `props` before they are serialized
+	const newProps = { ...props, ...slots }
 	const html = render(
-		h(Component, props, children != null ? h(StaticHtml, { value: children }) : children)
+		h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
 	);
 	return { html };
 }
diff --git a/packages/integrations/preact/static-html.js b/packages/integrations/preact/static-html.js
index 9af8002a7..7e964ef06 100644
--- a/packages/integrations/preact/static-html.js
+++ b/packages/integrations/preact/static-html.js
@@ -7,9 +7,9 @@ import { h } from 'preact';
  * As a bonus, we can signal to Preact that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value }) => {
+const StaticHtml = ({ value, name }) => {
 	if (!value) return null;
-	return h('astro-fragment', { dangerouslySetInnerHTML: { __html: value } });
+	return h('astro-slot', { name, dangerouslySetInnerHTML: { __html: value } });
 };
 
 /**