Styling: class:name

class:name

class:name={expr} toggles one class name from one expression.

For agentsUpdated 2026-10-20

class:name={expr} toggles one class name from one expression. It is shorthand for a one-key classList and is compiled to el.classList.toggle("name", !!expr):

src/row.tsxtsx

import { useStore } from "@shadow-js/core";

export function Row(props: { id: number }) {
  const [selected, setSelected] = useStore(false);
  return (
    <li class="row" class:selected={selected()} class:dim={!selected()}>
      Row {props.id}
      <button type="button" onClick={() => setSelected(true)}>
        select
      </button>
    </li>
  );
}

Write the call (selected(), !selected()). The expression must produce a value: !selected tests the function itself and is always false.