className

Replaces the whole class of an element: the helper compiled templates call for class and className.

Replaces the whole class of an element: the helper compiled templates call for class and className. HTML elements are written through className; SVG and MathML elements (whose className is not a plain string) through the class attribute. The DOM is touched only when the text changes.

Import#

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

Signature#

function className(el: Element, value: unknown): void

Parameters#

Name	Description
`el`	Target element.
`value`	A string is used as is. Arrays and objects are clsx-style: non-empty strings, numbers other than `0` and `NaN`, nested arrays, and the keys of objects whose value is truthy, joined with spaces. `null`, `undefined` and `false` remove the attribute.

Throws#

TypeError SHADOW_CLASS_CYCLE when an array contains itself (directly or through a nested array).

Examples#

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

const card = document.createElement("div");
className(card, ["card", { "card--active": true, "card--muted": false }]);
card.className; // "card card--active"