classList

Toggles individual classes from an object: the helper compiled templates call for classList.

Toggles individual classes from an object: the helper compiled templates call for classList. Unlike className, it leaves classes it did not set alone: only keys whose truthiness changed relative to prev are touched. A key may hold several space-separated names. Keys that disappeared from value are switched off.

Import#

import { classList } from "@shadow-js/web";

Signature#

function classList(
  el: Element,
  value: Record<string, unknown> | undefined,
  prev?: Record<string, unknown>,
): Record<string, unknown>

Parameters#

Name	Description
`el`	Target element.
`value`	Map from class names to truthiness. `undefined` switches off every class `prev` had on.
`prev`	The map returned by the previous call. Undefined (the first call) means no class was on yet.

Returns#

The map now in effect (value, or {} for undefined), to pass back as prev next time.

Examples#

import { classList } from "@shadow-js/web";

const el = document.createElement("li");
let prev = classList(el, { active: true, "is-new pulse": true });
prev = classList(el, { active: false }, prev); // removes active, is-new and pulse