classList

classList takes an object and toggles only the keys whose truthiness changed since the last run. Classes that other code added to the element are left alone, which is the difference from class:

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

export function Panel() {
  const [open, setOpen] = useStore(false);
  return (
    <section
      ref={(el: HTMLElement) => el.classList.add("added-by-a-library")}
      classList={{ open: open(), "is-visible is-ready": open() }}
    >
      <button type="button" onClick={() => setOpen(true)}>
        open
      </button>
    </section>
  );
}

Use class when this component owns the element's classes, and classList when it shares the element with something that adds its own (a focus-trap library, a drag-and-drop layer, a third-party widget).