Use alternative

packages/integrations/svelte/client-v5.js

@@ -4,17 +4,20 @@ export default (element) => {
 	return async (Component, props, slotted, { client }) => {
 		if (!element.hasAttribute('ssr')) return;
 
+		let children = undefined;
 		let $$slots = undefined;
 		for (const [key, value] of Object.entries(slotted)) {
 			$$slots ??= {};
-			$$slots[key] = createRawSnippet({
-				mount() {
-					const el = document.createElement('astro-slot');
-					if (key !== 'default') el.setAttribute('name', key);
-					el.innerHTML = value;
-					return el;
-				},
-			});
+			if (key === 'default') {
+				$$slots.default = true;
+				children = createRawSnippet(() => ({
+					render: () => `<astro-slot>${value}</astro-slot>`,
+				}));
+			} else {
+				$$slots[key] = createRawSnippet(() => ({
+					render: () => `<astro-slot name="${key}">${value}</astro-slot>`,
+				}));
+			}
 		}
 
 		const bootstrap = client !== 'only' ? hydrate : mount;
@@ -23,6 +26,7 @@ export default (element) => {
 			target: element,
 			props: {
 				...props,
+				children,
 				$$slots,
 			},
 		});

packages/integrations/svelte/server-v5.js

@@ -15,17 +15,26 @@ function needsHydration(metadata) {
 async function renderToStaticMarkup(Component, props, slotted, metadata) {
 	const tagName = needsHydration(metadata) ? 'astro-slot' : 'astro-static-slot';
 
+	let children = undefined;
 	let $$slots = undefined;
 	for (const [key, value] of Object.entries(slotted)) {
 		$$slots ??= {};
-		$$slots[key] = createRawSnippet({
-			render: () => `<${tagName}${key === 'default' ? '' : ` name="${key}"`}>${value}</${tagName}>`,
-		});
+		if (key === 'default') {
+			$$slots.default = true;
+			children = createRawSnippet(() => ({
+				render: () => `<${tagName}>${value}</${tagName}>`,
+			}));
+		} else {
+			$$slots[key] = createRawSnippet(() => ({
+				render: () => `<${tagName} name="${key}">${value}</${tagName}>`,
+			}));
+		}
 	}
 
 	const result = render(Component, {
 		props: {
 			...props,
+			children,
 			$$slots,
 		},
 	});