Scoped styles

Svelte コンポーネントには、そのコンポーネント専用の CSS を置くための <style> 要素を含めることができます。この CSS はデフォルトで スコープ されており、対象のコンポーネント外のページ上の要素には適用されません。

これは、CSS 効果の対象となる要素にクラスを追加することで機能します。このクラスは、コンポーネントのスタイルのハッシュ (例: svelte-123xyz) に基づいています。

<style>
	p {
		/* これはこのコンポーネント内の <p> 要素にのみ影響します */
		color: burlywood;
	}
</style>

詳細度(Specificity)

スコープされた各セレクタは、スコープ用クラス (例: .svelte-123xyz) がセレクタに追加されることで、詳細度(specificity) が 0-1-0 増加します。つまり、コンポーネント内で定義された p セレクタは、グローバルなスタイルシートで定義された p セレクタよりも優先されます。たとえグローバルなスタイルシートが後から読み込まれたとしてもです。

一部のケースでは、スコープ用クラスをセレクタに複数回追加する必要がありますが、2回目以降は :where(.svelte-xyz123) を使用して追加されます。これは詳細度をさらに増加させないためです。

Scoped keyframes

コンポーネントが @keyframes を定義した場合、その name は同じハッシュ手法を使用してコンポーネントにスコープされます。コンポーネント内の animation ルールも同様に調整されます。

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

	/* これらのキーフレームはこのコンポーネント内でのみ使用できます */
	@keyframes bounce {
		/* ... */
	}
</style>