How can i bind class as array?

[ashnamuh]

I tried

<script>
	const classes = ['a', 'b', 'c']
</script>

<h1 class={classes}>Hello World!</h1>

But result is

<h1 class="a,b,c">Hello World!</h1>

I expect

<h1 class="a b c">Hello World!</h1>

How can i bind multiple classes to a element?

[dcrck]

Hi @ashnamuh

In Svelte, you can put any JavaScript code between a pair of brackets. This allows you to achieve the functionality you want as follows:

<script>
	const classes = ['a', 'b', 'c']
</script>
<style>
	.a.b.c {
		color: purple;
	}
</style>
<h1 class={classes.join(' ')}>Hello World!</h1>

Also, for future reference, please post your "How do I do <X> in Svelte?" questions in the Discord chatroom. GitHub is really more for Svelte-specific issues and bugs. Thanks!

[hmaesta]

My code became full of .join(' ') since we started doing some AB tests with color variants – for instance:

<div class={[
      'px-10 py-5',
      $AB.black_friday ? 'bg-black' : 'bg-blue-100'
   ].join(' ')}
>
   <h2 class={[
         'text-2xl lg:text-4xl',
         $AB.black_friday ? 'text-white' : 'text-blue-800'
      ].join(' ')}
   >
         Welcome to my website!
   </h2>
</div>

Using arrays in class attribute is a native feature of Vue, but I understand Svelte approach and know that this won't become a thing.

So I was wondering... Is it possible to create a Vite script (?) to "auto-join" array items in class attribute during compile time? (Any initial directions would be great, I am a CSS guy).

[mdynnl]

You could get on with template strings class="{}" or multiple class: bindings.