Style di Svelte secara default scoped ke komponen.

Scoped Style

<p>Teks ini berwarna merah</p>

<style>
  p { color: red; }
</style>

CSS p { color: red } hanya berlaku untuk <p> di komponen ini, tidak bocor ke komponen lain.

Global Style

<style>
  :global(body) {
    margin: 0;
    font-family: sans-serif;
  }
</style>

Class Directive

<script>
  let active = true
</script>

<div class:active>...</div>
<div class:active={isActive}>...</div>
<div class:bg-red={hasError}>...</div>

Style Directive

<div style:color="red" style:font-size="{size}px">
  Teks berwarna
</div>