您可以将 CSS 自定义属性（静态和动态）传递给组件：

```svelte
<Slider
	bind:value
	min={0}
	max={100}
	--track-color="black"
	--thumb-color="rgb({r} {g} {b})"
/>
```

上述代码本质上简化为如下：

```svelte
<svelte-css-wrapper style="display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})">
	<Slider
		bind:value
		min={0}
		max={100}
	/>
</svelte-css-wrapper>
```

对于一个 SVG 元素，它将使用`<g>`代替：

```svelte
<g style="--track-color: black; --thumb-color: rgb({r} {g} {b})">
	<Slider
		bind:value
		min={0}
		max={100}
	/>
</g>
```

组件内部，我们可以通过`var(...)`读取这些自定义属性（并提供回退值）：[：](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

```svelte
<style>
	.track {
		background: var(--track-color, #aaa);
	}

	.thumb {
		background: var(--thumb-color, blue);
	}
</style>
```

您不需要在组件上直接指定值；只要在父元素上定义了自定义属性，组件就可以使用它们。通常，在全局样式中定义自定义属性于`:root`元素上，以便它们适用于您的整个应用程序。

> \[!注意\] 虽然额外元素不会影响布局，但它 *将* 影响任何使用 `>` 结合符直接针对组件容器内部元素的 CSS 选择器。