[feat] support `--style-props` for `<svelte:component>` (#7468)

* add test

* support --style-props for <svelte:component>

* refactor

* add more test

* support switching instance

* add test with svelte:self

* merge duplicated if statement

* slight refactor

* remove unnecessary anchor

* reorder insertion

Co-authored-by: tanhauhau <lhtan93@gmail.com>

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -399,12 +399,21 @@ export default class InlineComponentWrapper extends Wrapper {
 			return b`${name}.$on("${handler.name}", ${snippet});`;
 		});
 
+		const mount_target = has_css_custom_properties ? css_custom_properties_wrapper : (parent_node || '#target');
+		const mount_anchor = has_css_custom_properties ? 'null' : (parent_node ? 'null' : '#anchor');
+		const to_claim = parent_nodes && this.renderer.options.hydratable;
+		let claim_nodes = parent_nodes;
+
 		if (this.node.name === 'svelte:component') {
 			const switch_value = block.get_unique_name('switch_value');
 			const switch_props = block.get_unique_name('switch_props');
 
 			const snippet = this.node.expression.manipulate(block);
 
+			if (has_css_custom_properties) {
+				this.set_css_custom_properties(block, css_custom_properties_wrapper);
+			}
+
 			block.chunks.init.push(b`
 				var ${switch_value} = ${snippet};
 
@@ -427,20 +436,13 @@ export default class InlineComponentWrapper extends Wrapper {
 				b`if (${name}) @create_component(${name}.$$.fragment);`
 			);
 
-			if (parent_nodes && this.renderer.options.hydratable) {
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
-				block.chunks.claim.push(
+			block.chunks.mount.push(b`if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`);
-					b`if (${name}) @claim_component(${name}.$$.fragment, ${parent_nodes});`
-				);
-			}
-
-			block.chunks.mount.push(b`
-				if (${name}) {
-					@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
-				}
-			`);
 
-			const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+			if (to_claim) {
-			const update_mount_node = this.get_update_mount_node(anchor);
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+				block.chunks.claim.push(b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`);
+			}
 
 			if (updates.length) {
 				block.chunks.update.push(b`
@@ -448,6 +450,15 @@ export default class InlineComponentWrapper extends Wrapper {
 				`);
 			}
 
+			const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+			const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
+			const update_mount_node = has_css_custom_properties ? css_custom_properties_wrapper : this.get_update_mount_node(tmp_anchor);
+			const update_insert =
+				css_custom_properties_wrapper &&
+				(tmp_anchor.name !== 'null'
+					? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
+					: b`@insert(${parent_node}, ${css_custom_properties_wrapper}, ${tmp_anchor});`);
+
 			block.chunks.update.push(b`
 				if (${switch_value} !== (${switch_value} = ${snippet})) {
 					if (${name}) {
@@ -455,11 +466,13 @@ export default class InlineComponentWrapper extends Wrapper {
 						const old_component = ${name};
 						@transition_out(old_component.$$.fragment, 1, 0, () => {
 							@destroy_component(old_component, 1);
+							${has_css_custom_properties ? b`@detach(${update_mount_node})` : null}
 						});
 						@check_outros();
 					}
 
 					if (${switch_value}) {
+						${update_insert}
 						${name} = new ${switch_value}(${switch_props}(#ctx));
 
 						${munged_bindings}
@@ -501,62 +514,16 @@ export default class InlineComponentWrapper extends Wrapper {
 			`);
 
 			if (has_css_custom_properties) {
-				block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
+				this.set_css_custom_properties(block, css_custom_properties_wrapper);
-				block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
-				this.node.css_custom_properties.forEach(attr => {
-					const dependencies = attr.get_dependencies();
-					const should_cache = attr.should_cache();
-					const last = should_cache && block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
-					if (should_cache) block.add_variable(last);
-					const value = attr.get_value(block);
-					const init = should_cache ? x`${last} = ${value}` : value;
-
-					block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`);
-					if (dependencies.length > 0) {
-						let condition = block.renderer.dirty(dependencies);
-						if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
-
-						block.chunks.update.push(b`
-							if (${condition}) {
-								@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
-							}
-						`);
-					}
-				});
 			}
 			block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
 
-			if (parent_nodes && this.renderer.options.hydratable) {
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
-				let nodes = parent_nodes;
+			block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
-				if (has_css_custom_properties) {
-					nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
-					block.chunks.claim.push(b`
-						${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
-						var ${nodes} = @children(${css_custom_properties_wrapper});
-					`);
-				}
-				block.chunks.claim.push(
-					b`@claim_component(${name}.$$.fragment, ${nodes});`
-				);
-			}
 
-			if (has_css_custom_properties) {
+			if (to_claim) {
-				if (parent_node) {
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
-					block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
+				block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${claim_nodes});`);
-					if (is_head(parent_node)) {
-						block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
-					}
-				} else {
-					block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
-					// TODO we eventually need to consider what happens to elements
-					// that belong to the same outgroup as an outroing element...
-					block.chunks.destroy.push(b`if (detaching) @detach(${css_custom_properties_wrapper});`);
-				}
-				block.chunks.mount.push(b`@mount_component(${name}, ${css_custom_properties_wrapper}, null);`);
-			} else {
-				block.chunks.mount.push(
-					b`@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`
-				);
 			}
 
 			block.chunks.intro.push(b`
@@ -579,4 +546,64 @@ export default class InlineComponentWrapper extends Wrapper {
 			);
 		}
 	}
+
+	private create_css_custom_properties_wrapper_mount_chunk(
+		block: Block,
+		parent_node: Identifier,
+		css_custom_properties_wrapper: Identifier | null
+	) {
+			if (parent_node) {
+				block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
+				if (is_head(parent_node)) {
+					block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
+				}
+			} else {
+				block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
+				// TODO we eventually need to consider what happens to elements
+				// that belong to the same outgroup as an outroing element...
+				block.chunks.destroy.push(b`if (detaching && ${this.var}) @detach(${css_custom_properties_wrapper});`);
+			}
+	}
+
+	private create_css_custom_properties_wrapper_claim_chunk(
+		block: Block,
+		parent_nodes: Identifier,
+		css_custom_properties_wrapper: Identifier | null
+	) {
+		const nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
+		block.chunks.claim.push(b`
+			${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
+			var ${nodes} = @children(${css_custom_properties_wrapper});
+		`);
+		return nodes;
+	}
+
+	private set_css_custom_properties(
+		block: Block,
+		css_custom_properties_wrapper: Identifier
+	) {
+		block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
+		block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
+		this.node.css_custom_properties.forEach((attr) => {
+			const dependencies = attr.get_dependencies();
+			const should_cache = attr.should_cache();
+			const last = should_cache &&	block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
+			if (should_cache) block.add_variable(last);
+			const value = attr.get_value(block);
+			const init = should_cache ? x`${last} = ${value}` : value;
+
+			block.chunks.hydrate.push(
+				b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`
+			);
+			if (dependencies.length > 0) {
+				let condition = block.renderer.dirty(dependencies);
+				if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
+				block.chunks.update.push(b`
+					if (${condition}) {
+						@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
+					}
+				`);
+			}
+		});
+	}
 }

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>

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>
+		`);
+	}
+};

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)}
+/>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js

@@ -0,0 +1,57 @@
+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-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);">
+			<div id="component2">
+				<p class="svelte-17ay6rc">Slider1</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</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');
+
+			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(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.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');
+
+			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(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.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();
+	}
+};

test/runtime-puppeteer/samples/svelte-component-css-custom-properties/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)"
+/>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js

@@ -0,0 +1,59 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<section>
+			<div 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);">
+				<div id="component2">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</section>
+	`,
+	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');
+
+			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(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.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');
+
+			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(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.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();
+	}
+};

test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte

@@ -0,0 +1,22 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<section>
+	<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)"
+	/>
+</section>

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>

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>
+		`);
+	}
+};

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}
+/>

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>

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>

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');
+	}
+};

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)"
+/>

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>

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>

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();
+	}
+};

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)"
+/>