Svelte 5 provides a comprehensive styling system built on scoped CSS by default, with escape hatches for global styles, dynamic styling via reactive bindings, and CSS custom property integration.

Scoped CSS

By default, <style> blocks in .svelte files are scoped to the component. The compiler adds a unique class to each element and rewrites selectors to include that class, preventing style leaks between components.

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

The compiler transforms p to p.svelte-xyz internally.

Global Styles

Use the :global() modifier to opt out of scoping for specific selectors:

<style>
  :global(body) { margin: 0; }
  .card :global(h2) { font-size: 1.5em; }
</style>

CSS Custom Properties

Svelte 5 allows setting CSS custom properties on components, which flow through the component boundary and can be used in child component styles. This enables theme customization without breaking style encapsulation.

<Component --theme-color={primaryColor} />

In the child component:

<style>
  div { color: var(--theme-color); }
</style>

Dynamic Class Binding

Use the class attribute with an object, string, or array, or use the class: directive for boolean toggling:

<div class:active={isActive} class="base" />
<div class={{ active: isActive, disabled: !enabled }} />

Dynamic Inline Styles

Set styles reactively using the style attribute with an object or the style: directive:

<div style:color={textColor} style:background-color={bgColor} />
<div style={{ color: textColor, backgroundColor: bgColor }} />

Nested Style Elements

Svelte 5 supports nested <style> tags within components for scoping at different levels or conditional styling based on component state.