作用域樣式

Svelte 元件可以包含一個 <style> 元素，其中包含屬於該元件的 CSS。預設情況下，此 CSS 是具有作用域的，這表示樣式不會應用到該元件之外頁面上的任何元素。

這是透過將一個類別新增到受影響的元素來運作，該類別基於元件樣式的雜湊值（例如 svelte-123xyz）。

<style>
	p {
		/* this will only affect <p> elements in this component */
		color: burlywood;
	}
</style>

特殊性

由於將作用域類別（例如 .svelte-123xyz）新增到選取器，因此每個作用域選取器的特殊性會增加 0-1-0。這表示（例如）在元件中定義的 p 選取器會優先於在全域樣式表中定義的 p 選取器，即使全域樣式表稍後載入。

在某些情況下，必須將作用域類別多次新增到選取器，但在第一次出現後，會使用 :where(.svelte-xyz123) 新增，以便不會進一步增加特殊性。

作用域關鍵影格

如果元件定義 @keyframes，則名稱會使用相同的雜湊方法範圍限定為該元件。元件中的任何 animation 規則也會進行類似的調整

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

	/* these keyframes are only accessible inside this component */
	@keyframes bounce {
		/* ... *.
	}
</style>