Classes

To assign classes to an element, pass a literal or a store to className:.

const colors = ["red", "green", "blue"];
const timer = $store(0);
const className = timer.derive((t) => colors[t % colors.length]);
setInterval(() => ++timer.value, 500);

$element("span", { className })
.mount(document.body);

You can use an array of classes to apply all classes that are on the array.

const colors = ["red", "green", "blue"];
const timer = $store(0);
const className = timer.derive((t) => (["circle", colors[t % colors.length]]));
setInterval(() => ++timer.value, 500);

$element("span", { className })
.mount(document.body);

Or an object to apply all classes that are truthy.

const colors = ["red", "green", "blue"];
const timer = $store(0);
const className = timer.derive((t) => ({
    "square": t % 2 !== 0,
    "circle": t % 2 === 0,
}));
setInterval(() => ++timer.value, 500);

$element("span", { className })
.mount(document.body);