diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..4863966f85
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..96965c223b
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,41 @@
+export default {
+	props: {
+		railColor1: 'black',
+		trackColor1: 'red',
+		railColor2: 'green',
+		trackColor2: 'blue'
+	},
+	html: `
+		<div 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;">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ component, assert, target }) {
+		component.railColor1 = 'yellow';
+		component.trackColor2 = 'orange';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div 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;">
+				<div id="slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..00be45a8a4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import Slider from './Slider.svelte';
+	export let railColor1;
+	export let railColor2;
+	export let trackColor1;
+	export let trackColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<svelte:component
+	this={Slider}
+	id="slider-1"
+	--rail-color={railColor1}
+	--track-color={trackColor1}
+/>
+
+<svelte:component
+	this={Slider}
+	id="slider-2"
+	--rail-color={railColor2}
+	--track-color={identity(trackColor2)}
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider.svelte
new file mode 100644
index 0000000000..4863966f85
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
new file mode 100644
index 0000000000..9c3b7cbdea
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<div 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);">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert }) {
+		const railColor1 = target.querySelector('#slider-1 p');
+		const trackColor1 = target.querySelector('#slider-1 span');
+		const railColor2 = target.querySelector('#slider-2 p');
+		const trackColor2 = target.querySelector('#slider-2 span');
+
+		assert.htmlEqual(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+		assert.htmlEqual(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+		assert.htmlEqual(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+		assert.htmlEqual(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..47fc997b73
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Slider from './Slider.svelte';
+</script>
+
+<svelte:component
+	this={Slider}
+	id="slider-1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<svelte:component
+	this={Slider}
+	id="slider-2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>