記事の見た目をいじるのバックアップ差分(No.1)

更新

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
プログラミング/svelte/記事の見た目をいじるへ行く。
- 1 (2023-12-01 (金) 00:59:54)
- 2 (2023-12-01 (金) 02:59:26)
- 3 (2023-12-01 (金) 17:11:08)
- 4 (2023-12-01 (金) 20:35:57)

追加された行はこの色です。
削除された行はこの色です。

[[プログラミング/svelte]]

* いろいろきれいに見えるようにする [#k9f0334b]

#contents

* メモ： style の :global について [#xfd2fae0]

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 が付き、その下にあることが条件になっている。

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

Counter: 383 (from 2010/06/03), today: 3, yesterday: 0