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

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

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

## 詳細度(Specificity) <!--Specificity-->

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

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

## Scoped keyframes

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

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

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