Styles scopés

Les composants Svelte peuvent inclure un élément <style> contenant du CSS appartenant au composant. Ce CSS est scopé par défaut, ce qui signifie que les styles ne seront pas appliqués aux éléments de la page qui ne sont pas définis par le composant en question.

Ceci est possible en ajoutant une classe aux éléments concernés, classe dont le nom est basé sur un hash des styles du composant (par ex. svelte-123xyz).

<style>
	p {
		/* ceci n'affectera que les éléments `<p>` dans ce composant */
		color: burlywood;
	}
</style>

Spécificité

Chaque sélecteur scopé reçoit un incrément de spécificité de 0-1-0, résultant de l’application de la classe de scope (par ex. .svelte-123xyz). Cela signifie que (par example) un sélecteur p défini sur un composant aura priorité sur un sélecteur p défini dans une feuille de style globale, même si la feuille de style globale est chargée plus tard.

Dans certains cas, la classe de scope doit être ajoutée plusieurs fois à un sélecteur, mais après le premier ajout, cette classe est ajoutée en utilisant :where(.svelte-xyz123) pour ne pas incrémenter de nouveau la spécificité.

Keyframes scopés

Si un composant définit des @keyframes, leur nom est scopé au composant en utilisant la même approche de hashing. Toute règle animation du composant sera ajustée de la même manière :

<style>
	.bouncy {
		animation: bounce 10s;
	}

	/* ces keyframes ne sont accessibles que dans ce composant */
	@keyframes bounce {
		/* ... *.
	}
</style>