コンポーネントに CSS のカスタムプロパティを渡すことができます。静的なものも動的なものも可能です:

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

上記のコードは、本質的には次のように脱糖(desugar)されます:

```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/ja/docs/Web/CSS/Using_CSS_custom_properties) を使用してこれらのカスタムプロパティを読み取ることができ、またフォールバック値を指定することができます:

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

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

カスタムプロパティの値をコンポーネントに直接指定する _必要はありません_。親要素にカスタムプロパティが定義されていれば、コンポーネントはそれを使用できます。アプリケーション全体に適用するために、グローバルスタイルシートの `:root` 要素でカスタムプロパティを定義するのが一般的です。

> [!NOTE] 追加される要素はレイアウトには影響しませんが、例えば `>` コンビネータを使用してコンポーネントのコンテナ内の要素を直接ターゲットにする CSS セレクタには影響を与えます。