通常，您需要影響子元件內的樣式。也許我們想讓這些方塊變成紅色、綠色和藍色。

一種方法是使用 :global CSS 修飾符，它可以讓您不加區別地針對其他元件內的元素

<style>
	.boxes :global(.box:nth-child(1)) {
		background-color: red;
	}

	.boxes :global(.box:nth-child(2)) {
		background-color: green;
	}

	.boxes :global(.box:nth-child(3)) {
		background-color: blue;
	}
</style>

但是有很多理由不這樣做。首先，它非常冗長。其次，它很脆弱 — 對 Box.svelte 實作細節的任何變更都可能破壞選擇器。

最重要的是，這是不禮貌的。元件應該能夠自行決定哪些樣式可以從「外部」控制，就像它們決定哪些變數作為 props 公開一樣。:global 應該用作緊急出口 — 最後的手段。

在 Box.svelte 內部，變更 background-color，使其由 CSS 自訂屬性 決定

<style>
	.box {
		width: 5em;
		height: 5em;
		border-radius: 0.5em;
		margin: 0 0 1em 0;
		background-color: var(--color, #ddd);
	}
</style>

任何父元素（例如 <div class="boxes">）都可以設定 --color 的值，但我們也可以在個別元件上設定

<div class="boxes">
	<Box --color="red" />
	<Box --color="green" />
	<Box --color="blue" />
</div>

這些值可以是動態的，就像任何其他屬性一樣。

此功能的工作方式是在需要時將每個元件包裝在具有 display: contents 的元素中，並將自訂屬性套用至其中。如果您檢查這些元素，您會看到像這樣的標記

<svelte-css-wrapper style="display: contents; --color: red;">
	<!-- contents -->
</svelte-css-wrapper>

由於 display: contents，這不會影響您的版面配置，但額外的元素可能會影響像 .parent > .child 這樣的選擇器。