Does Svelte facilitate dynamic CSS styling? -

in svelte, how should classes changed on elements depending upon component state?

for instance, may wish apply class button under conditions, in following example.

<button class="{{class}}"> 

right now, can achieved creating computed property return class names, or empty strings, under conditions.

however, concerned on whether might polluting computed properties namespace. instance, if there status, might desired both set dynamic text, statusmessage, , class, statusclass.

is there better way this, or computed properties way go? more explicit support css planned svelte?

you can use inline expression, so:

<button class='{{active ? "active": "inactive"}}'>   {{active ? 'selected' : 'select this'}} </button> 

that's better using computed property, because it's clear possible values looking @ template.

you can use helper functions, if expression become unwieldy — in situations might prefer these computed values:

<button class='{{getclass(status)}}'>{{gettext(status)}}</button>  <script>   export default {     helpers: {       getclass(status) {         // ...       },       gettext(status) {         // ...       }     }   }; </script>