attr:

Derives one allowlisted HTML attribute of the matched element, such as disabled or aria-expanded, from a reactive value.

Syntax

attr: <attribute> <value>;

registry syntax: attr: <attribute> <string> | <number> | <keyword> | var(--state) | previous(--state) | direction(--state) | when(condition [, a, b])

Parameters

attributeallowlisted namerequired

aria-expanded, aria-pressed, aria-selected, aria-current, aria-disabled (0.6), aria-hidden, aria-busy, aria-invalid, aria-checked (true, false or mixed), aria-valuenow, aria-label and aria-valuetext (0.9), disabled, hidden, required, tabindex with 0/-1 (0.6), or data-*.

valueone scalarrequired

A literal, var(), previous(), direction() or when(). when(condition) without branches gives true/false.

Effect

No value. The attribute is written in the same task as the action that changed the state, so a derived disabled stops the next click.

Example

.stepper { --qty: state(1); }.stepper .plus  { on: click(increment(--qty)); attr: disabled when(--qty >= 10); }.stepper .minus { on: click(decrement(--qty)); attr: disabled when(--qty <= 1); }.menu > button  { attr: aria-expanded var(--open); }

Behavior

• 0.9. The new form is --attr-*: --attr-aria-expanded: var(--open), with the same semantics and runtime. attr: keeps working in 0.9.
• Each attribute is its own property: attr: declarations for different attributes combine, and the cascade picks the winner for each attribute separately.
• Boolean attributes are present or removed (never disabled="false"); ARIA states are written as "true"/"false"; aria-current takes its tokens; data-* is written as text.
• With no winning declaration the attribute returns to its original value. If something else changed it, the binding yields.
• disabled and required are only written where HTML gives them a meaning (warning otherwise).

Supported contexts

• Any element a rule matches; the value usually reads state owned by an ancestor.
• Trusted stylesheets only.

Limitations

• Handlers, URLs, style, class, id, name, value, role and ID references such as aria-describedby are rejected.
• A state(…, bind()) of the same attribute on the same element wins.
• aria-disabled does not block events: pair it with a conditional on: rule.
• Setting attributes does not make a component accessible by itself.

Related