SvelteStyling

Global styles

:global(...)

単一のセレクターに対してグローバルにスタイルを適用するには、:global(...) 修飾子を使用します:

<style>
	:global(body) {
		/* <body> に適用されます */
		margin: 0;
	}

	div :global(strong) {
		/* このコンポーネントに属する <div> 要素内にある
		   すべての <strong> 要素 (どのコンポーネントのものであっても) に適用されます
		    */
		color: goldenrod;
	}

	p:global(.big.red) {
		/* `class="big red"` を持つ、このコンポーネントに属する
		   すべての <p> 要素に適用されます。
		   これはライブラリなどによってプログラム的に適用された場合でも有効です */
	}
</style>

@keyframes をグローバルにアクセス可能にしたい場合は、keyframe name の前に -global- を付ける必要があります。

-global- の部分はコンパイル時に削除され、その後はコード内のどこからでも my-animation-name という名前でその keyframe を参照できるようになります。

<style>
	@keyframes -global-my-animation-name {
		/* ここにコードを記述 */
	}
</style>

:global

一連のセレクターに対してグローバルにスタイルを適用するには、:global {...} ブロックを作成します:

<style>
	:global {
		/* アプリケーション内のすべての <div> に適用されます */
		div { ... }

		/* アプリケーション内のすべての <p> に適用されます */
		p { ... }
	}

	.a :global {
		/* このコンポーネントの `.a` 要素内にある
		   すべての `.b .c .d` 要素 (どのコンポーネントのものであっても) に適用されます */
		.b .c .d {...}
	}
</style>

上記の 2 番目の例は .a :global .b .c .d セレクターとしても記述でき、この場合は :global の後に続く部分がスコープされません。なお、ネスト形式の方が推奨されます。

Edit this page on GitHub

previous next

Scoped styles Custom properties