setAttribute

Sets or removes one attribute with the JSX value rules: the helper compiled templates call for a dynamic attribute, also usable on elements you create yourself.

Sets or removes one attribute with the JSX value rules: the helper compiled templates call for a dynamic attribute, also usable on elements you create yourself. The DOM is touched only when the text changes. A URL attribute whose value would run script (see isUnsafeUrlAttribute) is left unchanged, and development builds warn once with UNSAFE_URL_BLOCKED.

Import#

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

Signature#

function setAttribute(el: Element, name: string, value: unknown): void

Parameters#

Name	Description
`el`	Target element.
`name`	Attribute name. It must match `[A-Za-z_:][A-Za-z0-9_:.-]*`.
`value`	`null`, `undefined` and `false` remove the attribute, except that `false` writes `"false"` for `aria-`, `data-`, `draggable`, `spellcheck` and `contenteditable`. `true` writes `""` (or `"true"` for those same names). Any other value is written as `String(value)`.

Throws#

TypeError INVALID_ATTRIBUTE_NAME when name is not a valid attribute name.

Examples#

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

const link = document.createElement("a");
setAttribute(link, "href", "https://example.com");
setAttribute(link, "aria-hidden", false); // aria-hidden="false"
setAttribute(link, "title", null); // removes title