fix

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -971,7 +971,8 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 
 		statements.push(
 			b.stmt(b.call('$.css_props', anchor, b.thunk(b.object(custom_css_props)))),
-			b.stmt(fn(b.member(anchor, b.id('lastChild'))))
+			b.stmt(fn(b.member(anchor, b.id('lastChild')))),
+			b.stmt(b.call('$.reset', anchor))
 		);
 	} else {
 		context.state.template.push('<!>');

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -991,6 +991,9 @@ function serialize_inline_component(node, expression, context) {
 		statement = b.block([...snippet_declarations, statement]);
 	}
 
+	const dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
 	if (custom_css_props.length > 0) {
 		statement = b.stmt(
 			b.call(
@@ -998,15 +1001,24 @@ function serialize_inline_component(node, expression, context) {
 				b.id('$$payload'),
 				b.literal(context.state.namespace === 'svg' ? false : true),
 				b.object(custom_css_props),
-				b.thunk(b.block([statement]))
+				b.thunk(b.block([statement])),
+				dynamic && b.true // TODO do we need the preceding anchor for dynamic components?
 			)
 		);
 	}
 
-	if (node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic)) {
-		context.state.template.push(block_open, statement, block_close);
+	if (dynamic) {
+		if (custom_css_props.length === 0) {
+			context.state.template.push(block_open);
+		}
+
+		context.state.template.push(statement);
 	} else {
-		context.state.template.push(statement, block_close);
+		context.state.template.push(statement);
+	}
+
+	if (custom_css_props.length === 0) {
+		context.state.template.push(block_close);
 	}
 }
 

packages/svelte/src/internal/client/dom/blocks/css-props.js

@@ -1,4 +1,5 @@
-import { render_effect } from '../../reactivity/effects.js';
+import { render_effect, teardown } from '../../reactivity/effects.js';
+import { hydrating, set_hydrate_node } from '../hydration.js';
 
 /**
  * @param {HTMLDivElement | SVGGElement} element
@@ -6,24 +7,29 @@ import { render_effect } from '../../reactivity/effects.js';
  * @returns {void}
  */
 export function css_props(element, get_styles) {
+	if (hydrating) {
+		set_hydrate_node(element.firstChild);
+	}
+
 	render_effect(() => {
-		render_effect(() => {
-			var styles = get_styles();
+		var styles = get_styles();
 
-			for (var key in styles) {
-				var value = styles[key];
+		for (var key in styles) {
+			var value = styles[key];
 
-				if (value) {
-					element.style.setProperty(key, value);
-				} else {
-					element.style.removeProperty(key);
-				}
+			if (value) {
+				element.style.setProperty(key, value);
+			} else {
+				element.style.removeProperty(key);
 			}
-		});
+		}
+	});
 
-		return () => {
-			// TODO use `teardown` instead of creating a nested effect, post-https://github.com/sveltejs/svelte/pull/11936
-			element.remove();
-		};
+	teardown(() => {
+		element.remove();
 	});
+
+	// if (hydrating) {
+	// 	set_hydrate_node(element);
+	// }
 }

packages/svelte/src/internal/server/index.js

@@ -160,15 +160,19 @@ export function attr(name, value, is_boolean = false) {
  * @param {boolean} is_html
  * @param {Record<string, string>} props
  * @param {() => void} component
+ * @param {boolean} dynamic
  * @returns {void}
  */
-export function css_props(payload, is_html, props, component) {
+export function css_props(payload, is_html, props, component, dynamic) {
 	const styles = style_object_to_string(props);
 	if (is_html) {
 		payload.out += `<div style="display: contents; ${styles}">`;
 	} else {
 		payload.out += `<g style="${styles}">`;
 	}
+	if (dynamic) {
+		payload.out += `<!---->`;
+	}
 	component();
 	if (is_html) {
 		payload.out += `<!----></div>`;