What is svelte:options in Svelte: Usage and Examples

svelte:options is a special tag in Svelte that lets you set component-level settings like the component's tag name or whether it is immutable. It customizes how Svelte treats the component during compilation and runtime.

How It Works

Think of svelte:options as a control panel inside your Svelte component. It lets you adjust some important settings that affect how your component behaves or is built. For example, you can tell Svelte to use a custom HTML tag name for your component instead of the default div. This is like giving your component a special label so it fits better in your page structure.

Another setting you can control is whether your component is immutable. This means Svelte will assume the component's data doesn't change, which can help it run faster by skipping some checks. Using svelte:options is like telling Svelte, "Hey, treat this component a bit differently," so it can optimize or behave as you want.

Example

This example shows how to use svelte:options to set a custom tag name and mark the component as immutable.

svelte

<script>
  export let name = 'friend';
</script>

<svelte:options tag="custom-greeting" immutable />

<h1>Hello, {name}!</h1>

Output

<h1>Hello, friend!</h1>

When to Use

Use svelte:options when you want to customize how your component is compiled or behaves. For example:

• Setting a custom HTML tag name helps when you want semantic or meaningful tags in your app.
• Marking a component as immutable can improve performance if you know its data won't change.
• It can also be used to enable or disable accessors or to tag a component as a custom element for web components.

In real projects, this helps you write cleaner HTML, optimize performance, or integrate with other web technologies.

Key Points

• svelte:options sets component-level settings inside a Svelte file.
• Common options include tag for custom element names and immutable for performance.
• It affects compilation and runtime behavior.
• Use it to improve semantics, performance, or integration.

Key Takeaways

svelte:options customizes component behavior and compilation in Svelte.

Use it to set custom HTML tags or mark components as immutable for better performance.

It helps make components more semantic and optimized.

Settings inside svelte:options apply only to the current component.