Skip to main content

Propriétés personnalisées

Vous pouvez fournir des propriétés CSS personnalisées — tant statiques que dynamiques — à vos composants :

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

Le code ci-dessus est en substance l’équivalent de ceci :

<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>

Pour un élément SVG, le compilateur utilisera plutôt un <g> :

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

Au sein du composant, nous pouvons lire ces propriétés personnalisées (et fournir des valeurs par défaut) en utilisant var(...) :

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

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

Vous n’avez pas besoin de préciser les valeurs directement sur le composant ; tant que les propriétés personnalisées sont sur un élément parent, le composant peut les utiliser. Il est courant de définir des propriétés personnalisées sur l’élément :root dans une feuille de styles globale afin qu’elles s’appliquent à toute votre application.

Même si l’élément supplémentaire n’aura pas d’influence sur votre layout, il va tout de même affecter tout sélecteur CSS qui (par exemple) utiliserait le combinateur > pour cibler un élément directement enfant de son conteneur.

Modifier cette page sur Github