In Svelte, 1 is syntactic sugar for 2.

<!-- 1 -->
<!-- 2 -->
<div style="display: contents;  --my-color: blue; --my-bg-color: red">

So in Welcome, css-variables are available.

Using preprocessor

Of cource this is useless. But I made it for practice.

Here's new App.svelte.

<!-- App.svelte -->

    Welcome {
        --my-color: blue;
        --my-bg-color: red;

Preprocessor modify Welcome.svelte using App.svelte before compile time.

<!-- Welcome.svelte -->
<div style="display: contents;  --my-color: blue; --my-bg-color: red">
    <h2>Hello {name}!</h2>
    <p>Visit the <a href="">Svelte tutorial</a> to learn how to build Svelte apps.</p>

Note that there's no need to modify Welcome.svelte. Wrapping Welcome with div in App.svelte produces same output. I just did it for preparing more complicated example.

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes