data-attr

Set any attribute from an expression: one attribute per key, or several from an object.

Syntax

data-attr:disabled="$busy"
data-attr:aria-expanded="$open"
data-attr="{ title: $tip, hidden: !$show, 'data-count': $n }"

part
key	optional: an attribute name (kebab-cased, __case changes it)
value	required: with a key, the attribute’s value; without one, an object of attributes

Modifiers

modifier	effect
__case.camel	keep the key camelCase instead of converting to kebab-case

Boolean attributes

true writes an empty attribute, false, null and undefined remove it, so the same expression drives disabled, hidden, required or open.

disabled and hidden

toggle busy I get disabled hidden while busy

<div data-signals="{ busy: false }" class="row">
  <button data-on:click="$busy = !$busy">toggle busy</button>
  <button data-attr:disabled="$busy">I get disabled</button>
  <span data-attr:hidden="$busy">hidden while busy</span>
</div>

Values

Numbers and strings are written as they are, which suits aria-* attributes, href, src, title and data attributes.

aria-expanded, title, data-*

aria-expanded=, hover for the title

<div data-signals="{ open: false, n: 0 }" class="row">
  <button data-on:click="$open = !$open; $n++" data-attr:aria-expanded="$open" data-attr:title="'clicked ' + $n + ' times'" data-attr:data-count="$n">aria-expanded=<span data-text="$open"></span>, hover for the title</button>
</div>

Object form

One attribute holds many keys. Attribute names that need quoting go in quotes.

several attributes at once

show ende

Hover me. lang=

<div data-signals="{ tip: 'a tooltip', show: true, lang: 'en' }">
  <div class="row"><input data-bind:tip> <label><input type="checkbox" data-bind:show> show</label> <select data-bind:lang><option>en</option><option>de</option></select></div>
  <p data-attr="{ title: $tip, hidden: !$show, lang: $lang, 'aria-live': 'polite' }">Hover me. lang=<b data-text="$lang"></b></p>
</div>

Notes

Everything that is not a boolean, null or undefined is converted with String(); pass objects through JSON.stringify yourself if you need them serialised. Attributes the directive removed are not restored on unmount.

Register

import { attr } from 'sigmx/plugins'

Registering attr adds 148 bytes brotli (193 gzip, 407 minified) on top of the core. See bundle sizes.