diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..210e34cbe9
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,29 @@
+<script>
+  export let id;
+	export let count = 0;
+	export let railColor1;
+	export let trackColor1;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count="{count + 1}"
+		--rail-color={railColor1}
+		--track-color={trackColor1}
+	/>
+{/if}
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..c7d1369edc
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,71 @@
+export default {
+	props: {
+		railColor1: 'black',
+		trackColor1: 'red',
+		railColor2: 'green',
+		trackColor2: 'blue',
+		nestRailColor1: 'white',
+		nestTrackColor1: 'gray',
+		nestRailColor2: 'aqua',
+		nestTrackColor2: 'pink'
+	},
+	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 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;">
+			<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;">
+				<div id="nest-slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ component, assert, target }) {
+		component.railColor1 = 'yellow';
+		component.trackColor2 = 'orange';
+		component.nestRailColor1 = 'lime';
+		component.nestTrackColor2 = 'gold';
+
+		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 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;">
+				<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;">
+					<div id="nest-slider-2">
+						<p class="svelte-17ay6rc">Slider</p>
+						<span class="svelte-17ay6rc">Track</span>
+					</div>
+				</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..69c31fff35
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	import Slider from './Slider.svelte';
+	export let railColor1;
+	export let railColor2;
+	export let trackColor1;
+	export let trackColor2;
+	export let nestRailColor1;
+	export let nestRailColor2;
+	export let nestTrackColor1;
+	export let nestTrackColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<Slider
+	id="slider-1"
+	--rail-color={railColor1}
+	--track-color={trackColor1}
+	railColor1={nestRailColor1}
+	trackColor1={nestTrackColor1}
+/>
+
+<svelte:component
+	this={Slider}
+	id="slider-2"
+	--rail-color={railColor2}
+	--track-color={identity(trackColor2)}
+	railColor1={nestRailColor2}
+	trackColor1={nestTrackColor2}
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider1</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(255, 255, 0)"
+		--track-color="rgb(255, 0, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider2</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(0, 255, 255)"
+		--track-color="rgb(255, 255, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
new file mode 100644
index 0000000000..f3023db3c4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
@@ -0,0 +1,47 @@
+export default {
+	props: {},
+	html: `
+		<div 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);">
+				<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);">
+			<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);">
+				<div id="nest-component2">
+					<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert }) {
+		const railColor1 = target.querySelector('#component1 p');
+		const trackColor1 = target.querySelector('#component1 span');
+		const railColor2 = target.querySelector('#component2 p');
+		const trackColor2 = target.querySelector('#component2 span');
+		const nestRailColor1 = target.querySelector('#nest-component1 p');
+		const nestTrackColor1 = target.querySelector('#nest-component1 span');
+		const nestRailColor2 = target.querySelector('#nest-component2 p');
+		const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+		assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+		assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+		assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+		assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+		assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+		assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+		assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+		assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+		assert.equal(railColor1.textContent, 'Slider1');
+		assert.equal(railColor2.textContent, 'Slider2');
+		assert.equal(nestRailColor1.textContent, 'Slider1');
+		assert.equal(nestRailColor2.textContent, 'Slider2');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..1a4ed02959
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+</script>
+
+<Slider1
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<Slider2
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider1</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(255, 255, 0)"
+		--track-color="rgb(255, 0, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider2</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(0, 255, 255)"
+		--track-color="rgb(255, 255, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5efc8f0c70
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
@@ -0,0 +1,84 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<div 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);">
+				<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);">
+			<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);">
+				<div id="nest-component2">
+					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+			const nestRailColor1 = target.querySelector('#nest-component1 p');
+			const nestTrackColor1 = target.querySelector('#nest-component1 span');
+			const nestRailColor2 = target.querySelector('#nest-component2 p');
+			const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+			assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(255, 255, 0)');
+			assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+			assert.equal(nestRailColor1.textContent, 'Slider1');
+			assert.equal(nestRailColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+			const nestRailColor1 = target.querySelector('#nest-component1 p');
+			const nestTrackColor1 = target.querySelector('#nest-component1 span');
+			const nestRailColor2 = target.querySelector('#nest-component2 p');
+			const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(0, 255, 255)');
+			assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 255, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+			assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+			assert.equal(nestRailColor1.textContent, 'Slider2');
+			assert.equal(nestRailColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..2c6d05dc25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<svelte:component
+	this={slider}
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<svelte:component
+	this={slider}
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>