Skip to main content
<svelte:options option={value} />
The <svelte:options> element provides a place to specify per-component compiler options. These options control how Svelte compiles the component.

​
Options

​
runes
boolean
Forces a component into runes mode or legacy mode.
  • runes={true} — forces the component into runes mode
  • runes={false} — forces the component into legacy mode
If not specified, the mode is determined by the file’s syntax.
​
namespace
string
The namespace where this component will be used.Possible values:
  • "html" (default) — for regular HTML elements
  • "svg" — for SVG elements
  • "mathml" — for MathML elements
​
customElement
string | object
Options for compiling this component as a custom element.
  • If a string is provided, it’s used as the tag name
  • If an object is provided, it can contain custom element configuration options
See the custom elements documentation for details.
​
css
string
Controls how component styles are injected.
  • css="injected" — styles are injected inline. During server-side rendering, it’s injected as a <style> tag in the head. During client-side rendering, it’s loaded via JavaScript.

​
Usage

​
Force runes mode

<svelte:options runes={true} />

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicks: {count}
</button>

​
SVG namespace

<svelte:options namespace="svg" />

<circle cx="50" cy="50" r="40" />

​
Custom element

<svelte:options customElement="my-button" />

<button>
  <slot />
</button>

​
Custom element with options

<svelte:options 
  customElement={{
    tag: 'my-component',
    shadow: 'open',
    props: {
      name: { reflect: true, type: 'String', attribute: 'name' }
    }
  }}
/>

<script>
  let { name } = $props();
</script>

<p>Hello {name}!</p>

​
Injected CSS

<svelte:options css="injected" />

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

<p>This will have injected styles</p>

​
MathML namespace

<svelte:options namespace="mathml" />

<math>
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mn>42</mn>
  </mrow>
</math>

​
Deprecated Options (Svelte 4)

The following options are deprecated in Svelte 5 and non-functional in runes mode. They are only supported in legacy mode.
​
immutable
boolean
Deprecated. Controls whether the compiler can use simple referential equality checks.
  • immutable={true} — you never use mutable data
  • immutable={false} — the default
​
accessors
boolean
Deprecated. Adds getters and setters for the component’s props.
  • accessors={true} — adds getters and setters
  • accessors={false} — the default

​
Legacy immutable option

<!-- Only works in legacy mode -->
<svelte:options immutable={true} />

​
Legacy accessors option

<!-- Only works in legacy mode -->
<svelte:options accessors={true} />