SvelteStyling

Custom properties

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

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

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

<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> が使用されます:

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

コンポーネント内では、var(...) を使用してこれらのカスタムプロパティを読み取ることができ、またフォールバック値を指定することができます:

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

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

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

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

Edit this page on GitHub

previous next

Global styles Nested <style> elements