Svelte: Can I bind element's class or style?

[f15gdsy]

Hi, can I do something like this?

<div class="a b" bind:class="aComputedClass" bind:style="aComputedStyle"></div>

As I tried this, it doesn't work.
I would expect it to behave like Vue.

Btw, I like the idea of svelte very much!

[Rich-Harris]

Svelte avoids having lots of special syntax that you have to learn – you can just use regular JavaScript expressions inside tags:

<div class="a b {{foo ? 'foo' : ''}}" style="color: {{bar}};"></div>

[f15gdsy]

Thanks for replying!
But a lot of dom manipulation actually toggles classes or styles,
so it may be meaningful to support such syntax.

[paulocoghi]

@f15gdsy Performance and syntax are not always related. Sometimes we get the wrong impression that if the syntax is too easy, then it's slow.

Since everything in Svelte is compiled, and pretty much everything processes in O (1), it's ready for really huge dom manipulations, and it's amazingly fast (more than Vue).

Don't worry by the syntax, because it's not only easier, it's faster.

[f15gdsy]

@paulocoghi thanks for replying!

My reply was a bit misleading.
What I meant was that a good number of times when we manipulate doms, we are just trying to manipulate their classes or styles.
So the syntax in my first comment may be more clear and friendly to use :D

[dhulme]

For those looking now, you can do this https://svelte.dev/tutorial/classes