カスタムプロパティ
コンポーネントに CSS カスタムプロパティ（静的および動的）を渡すことができます
<Slider
bind:value
min={0}
max={100}
--track-color="black"
--thumb-color="rgb({r} {g} {b})"
/>上記のコードは、本質的にこれと同じ意味になります
<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 セレクターに影響を与えます。
前へ 次へ