記事の見た目をいじる の履歴(No.1)

いろいろきれいに見えるようにする†

メモ： style の :global について†

svelte の style 定義には自動的にコンポーネントインスタンスの id が追加されるため、 そのコンポーネントに直接含まれる（子コンポーネントは除外）エレメントにしか効果を及ぼさない。

コンポーネントを超えて効果を期待する場合には :global を付ける。

https://svelte.jp/docs/svelte-components#style

LANG: html
<style>
	:global(strong) {
		/* これはすべての <strong> に適用されます */
		margin: 0;
	}

	div :global(strong) {
		/* これは「このコンポーネント内の <div> 要素」の中にある
			 「すべての <strong> 要素」に
			 適用されます */
		color: goldenrod;
	}
</style>

上記の例では div に :global がかかっていないため、div にはコンポーネントインスタンスの ID が付き、その下にあることが条件になっている。

「このコンポーネントの子供」に適用したい場合にはこのテクニックが役に立ちそう。