Overview

$(target) returns a DollarChain — every method returns this so you can chain attribute, style, class, text, event, ARIA, and measurement helpers.

Accepts a raw Element, a MatesRef, or a CSS selector string (document.querySelector, first match). When a ref’s .value is still undefined, or a selector matches nothing, $ throws. Use selectors / refs after mount — onMount / onPaint / onUpdate / Raw setup().

eleHook mounts receive the same $ bound to the host element — see eleHook.

$ vs directives vs refs

API
When
Notes
$(el) Imperative Lifecycle callbacks, third-party widgets, one-off DOM ops.
attr / style / classes Declarative Prefer element directives inside html`…` when values are reactive.
ref + setRef Handle Grab the node, then call $ after mount.

Chain attr · style · classes · on · text

On mount, $() configures the box and toggles a class on click — no reactive template bindings required for those DOM ops.

import { html, ref, setRef, onMount, $, renderApp } from 'mates';

const App = () => {
const boxRef = ref();
const log = ref();

onMount(() => {
$(boxRef)
.attr({ role: 'button', tabindex: 0 })
.style({ padding: '12px 16px', borderRadius: '8px', cursor: 'pointer' })
.classes(['card'])
.text('Click me')
.on('click', () => {
$(boxRef).toggleClass('primary').text('Clicked!');
$(log).text('toggleClass + text via $()');
});
});

return () => html`
<div class="m-col m-gap m-items-center">
<div ${setRef(boxRef)}></div>
<p class="label" ${setRef(log)}>Waiting…</p>
</div>
`;
};
renderApp(App, document.getElementById('app'));

measure() bounding rect

measure(cb) reads getBoundingClientRect synchronously and keeps the chain alive for further calls.

import { html, ref, setRef, onMount, atom, $, renderApp } from 'mates';

const App = () => {
const boxRef = ref();
const size = atom('—');

onMount(() => {
$(boxRef)
.style({ width: '160px', height: '80px' })
.classes(['card'])
.text('Measure me')
.measure(({ width, height }) => {
size.set(`${Math.round(width)}×${Math.round(height)}`);
});
});

return () => html`
<div class="m-col m-gap m-items-center">
<div ${setRef(boxRef)}></div>
<p class="label">${size()}</p>
</div>
`;
};
renderApp(App, document.getElementById('app'));