子コンポーネント内のスタイルに影響を与える必要がある場合がよくあります。例えば、これらのボックスを赤、緑、青にしたいとします。

これを行う1つの方法は、: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>

しかし、そうしない理由はたくさんあります。1つは、非常に冗長であることです。もう1つは、もろいことです。Box.svelte の実装の詳細を変更すると、セレクタが壊れる可能性があります。

しかし、何よりも、それは失礼です。コンポーネントは、どの変数がプロパティとして公開されるかを決定するのと同じ方法で、どのスタイルを「外部」から制御できるかを自分で決定できる必要があります。 :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 のようなセレクタに影響を与える可能性があります。