diff --git a/.changeset/tasty-spies-sniff.md b/.changeset/tasty-spies-sniff.md
new file mode 100644
index 000000000000..6ea9288de928
--- /dev/null
+++ b/.changeset/tasty-spies-sniff.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: use `<svelte-css-wrapper>` instead of `<div>` for style props
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 4463b5a1d0ae..ccf0e23dd232 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -362,7 +362,7 @@ export function build_component(node, component_name, context, anchor = context.
 		context.state.template.push(
 			context.state.metadata.namespace === 'svg'
 				? '<g><!></g>'
-				: '<div style="display: contents"><!></div>'
+				: '<svelte-css-wrapper style="display: contents"><!></svelte-css-wrapper>'
 		);
 
 		statements.push(
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 5d0355b043c5..69f897123e90 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -186,7 +186,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
 	const styles = style_object_to_string(props);
 
 	if (is_html) {
-		payload.out += `<div style="display: contents; ${styles}">`;
+		payload.out += `<svelte-css-wrapper style="display: contents; ${styles}">`;
 	} else {
 		payload.out += `<g style="${styles}">`;
 	}
@@ -198,7 +198,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
 	component();
 
 	if (is_html) {
-		payload.out += `<!----></div>`;
+		payload.out += `<!----></svelte-css-wrapper>`;
 	} else {
 		payload.out += `<!----></g>`;
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
index c636a3aca56d..37388413d8e2 100644
--- a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
@@ -8,18 +8,18 @@ export default test({
 		trackColor2: 'blue'
 	},
 	html: `
-		<div style="display: contents; --rail-color: black; --track-color: red;">
+		<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: green; --track-color: blue;">
+		</svelte-css-wrapper>
+		<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</svelte-css-wrapper>
 	`,
 	test({ component, assert, target }) {
 		component.railColor1 = 'yellow';
@@ -28,18 +28,18 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div style="display: contents; --rail-color: yellow; --track-color: red;">
+			<svelte-css-wrapper style="display: contents; --rail-color: yellow; --track-color: red;">
 				<div id="slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-			<div style="display: contents; --rail-color: green; --track-color: orange;">
+			</svelte-css-wrapper>
+			<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: orange;">
 				<div id="slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
+			</svelte-css-wrapper>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
index 25de6b18f9d2..4c7b8ab64512 100644
--- a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
@@ -2,18 +2,18 @@ import { test, assert_ok } from '../../assert';
 
 export default test({
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+		</svelte-css-wrapper>
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</svelte-css-wrapper>
 	`,
 	test({ target, window, assert }) {
 		const rail_color1 = target.querySelector('#slider-1 p');
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
index c636a3aca56d..37388413d8e2 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
@@ -8,18 +8,18 @@ export default test({
 		trackColor2: 'blue'
 	},
 	html: `
-		<div style="display: contents; --rail-color: black; --track-color: red;">
+		<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: green; --track-color: blue;">
+		</svelte-css-wrapper>
+		<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</svelte-css-wrapper>
 	`,
 	test({ component, assert, target }) {
 		component.railColor1 = 'yellow';
@@ -28,18 +28,18 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div style="display: contents; --rail-color: yellow; --track-color: red;">
+			<svelte-css-wrapper style="display: contents; --rail-color: yellow; --track-color: red;">
 				<div id="slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-			<div style="display: contents; --rail-color: green; --track-color: orange;">
+			</svelte-css-wrapper>
+			<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: orange;">
 				<div id="slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
+			</svelte-css-wrapper>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
index 4f82db0a050b..e9040d8979bd 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
@@ -5,18 +5,18 @@ export default test({
 		componentName: /** @type {string | undefined} */ ('Slider1')
 	},
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="component1">
 				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+		</svelte-css-wrapper>
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="component2">
 				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</svelte-css-wrapper>
 	`,
 	test({ target, window, assert, component }) {
 		function assert_slider_1() {
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
index 09f725bb3d65..303b1a377ce5 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
@@ -6,18 +6,18 @@ export default test({
 	},
 	html: `
 		<section>
-			<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+			<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 				<div id="component1">
 					<p class="svelte-17ay6rc">Slider1</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-			<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+			</svelte-css-wrapper>
+			<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 				<div id="component2">
 					<p class="svelte-17ay6rc">Slider1</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
+			</svelte-css-wrapper>
 		</section>
 	`,
 	test({ target, window, assert, component }) {
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
index a3079df1d897..e885369deefc 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
@@ -12,30 +12,30 @@ export default test({
 		nestTrackColor2: 'pink'
 	},
 	html: `
-		<div style="display: contents; --rail-color: black; --track-color: red;">
+		<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: red;">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: white; --track-color: gray;">
+			<svelte-css-wrapper style="display: contents; --rail-color: white; --track-color: gray;">
 				<div id="nest-slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-		</div>
-		<div style="display: contents; --rail-color: green; --track-color: blue;">
+			</svelte-css-wrapper>
+		</svelte-css-wrapper>
+		<svelte-css-wrapper style="display: contents; --rail-color: green; --track-color: blue;">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: aqua; --track-color: pink;">
+			<svelte-css-wrapper style="display: contents; --rail-color: aqua; --track-color: pink;">
 				<div id="nest-slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-		</div>
+			</svelte-css-wrapper>
+		</svelte-css-wrapper>
 	`,
 	test({ component, assert, target }) {
 		component.railColor1 = 'yellow';
@@ -46,30 +46,30 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div style="display: contents; --rail-color:yellow; --track-color:red;">
+			<svelte-css-wrapper style="display: contents; --rail-color:yellow; --track-color:red;">
 				<div id="slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-				<div style="display: contents; --rail-color:lime; --track-color:gray;">
+				<svelte-css-wrapper style="display: contents; --rail-color:lime; --track-color:gray;">
 					<div id="nest-slider-1">
 						<p class="svelte-17ay6rc">Slider</p>
 						<span class="svelte-17ay6rc">Track</span>
 					</div>
-				</div>
-			</div>
-			<div style="display: contents; --rail-color:green; --track-color:orange;">
+				</svelte-css-wrapper>
+			</svelte-css-wrapper>
+			<svelte-css-wrapper style="display: contents; --rail-color:green; --track-color:orange;">
 				<div id="slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-				<div style="display: contents; --rail-color:aqua; --track-color:gold;">
+				<svelte-css-wrapper style="display: contents; --rail-color:aqua; --track-color:gold;">
 					<div id="nest-slider-2">
 						<p class="svelte-17ay6rc">Slider</p>
 						<span class="svelte-17ay6rc">Track</span>
 					</div>
-				</div>
-			</div>
+				</svelte-css-wrapper>
+			</svelte-css-wrapper>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
index 673a14a6a8ed..1d9037f9c339 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
@@ -3,25 +3,26 @@ import { assert_ok, test } from '../../assert';
 export default test({
 	props: {},
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="component1">
 				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
+			<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
 				<div id="nest-component1">
 					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
 				</div>
-			</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+			</svelte-css-wrapper>
+		</svelte-css-wrapper>
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="component2">
 				<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
+			<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
 				<div id="nest-component2">
 					<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
 				</div>
-			</div>
-		</div>
+			</svelte-css-wrapper>
+		</svelte-css-wrapper>
 	`,
 	test({ target, window, assert }) {
 		const rail_color1 = target.querySelector('#component1 p');
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
index a7d8c1bc38ac..8fff5736d3e7 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
@@ -5,25 +5,26 @@ export default test({
 		componentName: /** @type {string | undefined} */ ('Slider1')
 	},
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="component1">
 				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
+			<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
 				<div id="nest-component1">
 					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
 				</div>
-			</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+			</svelte-css-wrapper>
+		</svelte-css-wrapper>
+		<svelte-css-wrapper style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="component2">
 				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
+			<svelte-css-wrapper style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
 				<div id="nest-component2">
 					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 				</div>
-			</div>
-		</div>
+			</svelte-css-wrapper>
+		</svelte-css-wrapper>
 	`,
 	test({ target, window, assert, component }) {
 		function assert_slider_1() {
diff --git a/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js b/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
index 71d240eb4d55..49a7781f33f1 100644
--- a/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	html: `
-		<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+		<svelte-css-wrapper style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
 			<div class="svelte-271qee">hi</div>
-		</div>
+		</svelte-css-wrapper>
 	`
 });
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index ec1dfaeb3421..1802966b8389 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -429,4 +429,8 @@ Svelte 5 makes use of comments during server side rendering which are used for m
 
 Event attributes replace event directives: Instead of `on:click={handler}` you write `onclick={handler}`. For backwards compatibility the `on:event` syntax is still supported and behaves the same as in Svelte 4. Some of the `onevent` attributes however are delegated, which means you need to take care to not stop event propagation on those manually, as they then might never reach the listener for this event type at the root.
 
+### `--style-props` uses a different element
+
+Svelte 5 uses an extra `<svelte-css-wrapper>` element instead of a `<div>` to wrap the component when using CSS custom properties.
+
 <!-- TODO in final docs, add link to corresponding section for more details -->