importで読み込んだ要素にCSSを適用
Svelteはimportで.svelteファイルを読み込めるので、SVGやslotを含む.svelteファイルを読み込んで利用することが多い。
.svelteファイルを読み込んだ要素にCSSを適用させたいことがあるが、Svelteでは普通に指定しただけではスタイルシートが適用されない。
<script>
import Svg from './Svg.svelte'
</script>
<style>
.container > svg {
fill: green;
}
</style>
<div class="container">
<Svg/>
</div>
親コンポーネントから子コンポーネントの特定の要素にスタイルを適用するためには、Svelteの:global修飾子を利用します。
<script>
import Svg from './Svg.svelte'
</script>
<style>
.container > :global(svg) {
fill: green;
}
</style>
<div class="container">
<Svg/>
</div>
:globalはslotが使用されている場合でも適用できます。
<!-- Box.svelte -->
<div class="box">
<slot></slot>
</div>
<script>
import Box from './Box.svelte';
</script>
<Box>
<h2>Hello!</h2>
<p>This is a box.</p>
</Box>
<style>
:global(.box > h2) {
color: orange
}
</style>
ただし、この方法はスタイルのカプセル化を壊す可能性があるため、注意が必要です。
