Exploring Svelte

We had mentioned reasons to use Svelte in a previous blog. Continuing the conversation from there, we now dive into a more implementational showcase of some of Svelte’s capabilities using a common example.

Let’s say we want to create a basic container box component:

Our starting component should look something like this:

1. Using CSS Variables in Styles

Let’s start by creating a simple centered div element:

The <style> section defines styles for the div element, but in our snippet above, we have a completely static element.

2. Dynamic CSS Variables

Let’s say we want our component to be dynamic:

Svelte leverages CSS variables (var(--variable-name)), which can be used to dynamically apply styles based on given values without rewriting CSS rules.
For example, according to the snippet, --direction, --alignment, and --justify are CSS variables whose values are set based on the styles variable.

Now that we have dynamic styles, we need to implement something that applies the dynamically generated CSS variable cssVarStyles to the component. We do that by binding the styles to the element:

We can now move on to implementing our component’s customizability through passing props and make it reactively change based on their state:

3. Exported Props

The <script> section exports are how props get defined in Svelte.
In the snippet, the variables (props) control the layout and styling of the component.

4. Reactive Declarations with $:

Svelte allows us to create reactive declarations using the $: syntax.
In this snippet, styles and cssVarStyles are reactive declarations that update whenever their dependent variables change — i.e., styles depends on exported props, while cssVarStyles depends on styles itself.

When we combine all the points mentioned above into our component, we will have something like the following:

Now we want our component to be a wrapper (container) like this:

Looking at the div from the previous snippets:

The component, while being reactively styled, still will not accept child elements.
Svelte has a particular way of allowing for that, using its <slot> element:

The <slot> element in Svelte allows passing children into components from outside their scope (non-fixed component structure).
It allows different content to be inserted into the component while maintaining its structure and functionality.

In summary

Svelte empowers developers to create responsive and maintainable UI components by combining:

• Reactive declarations
• Exported props
• CSS variables
• Dynamic style bindings
• The <slot> element

This seamless integration of JavaScript logic with CSS makes styling in Svelte intuitive and powerful.