Svelte by Example: Class & Style Directives

Svelte supports class: and style: directives to make dynamic styling easy.

In this example, we'll demonstrate class and style directives by enabling a large prop on our HelloWorld.

Classes can be conditionally rendered with a class:<class>= notation.

Todo.svelte

<script>
  export let task;
  export let completed = false;
</script>

<p class:is-completed={completed}>
  {task}
</p>

<style>
  .is-completed {
    text-decoration: line-through;
  }
</style>

Styles can also be set with a style:<property>= notation.

Todo.svelte

<script>
  export let task;
  export let completed = false;
</script>

<p style:text-decoration={completed ? 'line-through' : null}>
  {task}
</p>

resources://