New feature: manipulate with className as a set, instead of a string

The class attribute is somewhat similar to style attribute: it’s a string representation of a more sophisticated data structure. In the case of style it’s a CSSStyleDeclaration, which is a map. In the case class, it’s a proxy for the classList: DOMTokenList, which is basically a set.

I think it’d be pretty natural to treat class similar to style and would also reduce conflicts with web components, where a web component could set its own “internal” classes.

This is what it could look like:

<div class={['class1', 'class2', isOn ? 'class3' : '', isOn2 && 'class4']}>
  ...
</div>

It would work as following:

1. The array is expected to have a set of strings. False-y values (empty strings, false, null, etc) will be removed from the array before processing.
2. The new array state will be diffed against the new state and only the changed classes will be added/removed.
3. The element.classList will be used to add/remove classes.

Here’s a little demo: https://codesandbox.io/s/9lx87xkqvo. It shows that updating the class via Preact currently overwrites classes the classes set by an emulated web component.

[marvinhagemeister]

This is a neat idea and something that can be easily implemented via the suggestions by @lukeed above, or as a runtime hook:

import { options } from "preact";

options.vnode = (vnode) => {
  let props = vnode.props;
  props.class = doSomething(props.class);
  return vnode;
}

Because it is so easy to shim this feature and users usually bring their own variant of classnames, clsx, etc it is very unlikely that something like that would be added back to core.

[wizzard0]

this is interesting, though i’d vote for using object instead of a class, like

<a class={{...someClassesFromProps, class1: true, class2: isOn }}>...</a>

rationale: easier to compose classes from different sources, if you use a list there’s no way to clear a class, and with object it’s just a matter of a spread operator