style
Sets the inline style of an element: the helper compiled templates call for a style attribute.
Sets the inline style of an element: the helper compiled templates call for a style attribute.
An object is diffed against prev so that only changed properties are written, each with the
rules of setStyleProperty; properties that disappeared are removed.
Import#
ts
import { style } from "@shadow-js/web";
Signature#
ts
function style(el: HTMLElement | SVGElement, value: unknown, prev?: unknown): unknown
Parameters#
| Name | Description |
|---|---|
el |
HTML or SVG element. |
value |
An object of properties (camelCase, kebab-case or custom names). A string replaces cssText. null, undefined and false remove the style attribute. |
prev |
The value returned by the previous call. Undefined (the first call) diffs against an empty style. When it is a string, cssText is cleared before the object is written. |
Returns#
What to pass back as prev next time: a shallow copy of an object value, otherwise
value itself.
Examples#
ts
import { style } from "@shadow-js/web";
const el = document.createElement("div");
let prev = style(el, { color: "red", width: 120 }); // width: 120px
prev = style(el, { color: "blue" }, prev); // writes color, removes width