eleHook / htmlHook

Imperative DOM element access directives.

import { html, eleHook } from 'mates';

// Factory: mountFn($, ...args) → optional { onUpdate, onCleanup }
const drawCircle = eleHook(($, color) => {
  const canvas = $.el;
  const ctx = canvas.getContext('2d');
  const paint = (c) => { /* draw with c */ };
  paint(color);
  return {
    onUpdate(nextColor) { paint(nextColor); },
    onCleanup() { /* dispose */ },
  };
});

html`<canvas ${drawCircle(color.val)}></canvas>`;

Overview

eleHook(mountFn) is the primitive for building element directives. mountFn receives a $ (DollarChain) bound to the host element, plus any user args you define on the returned factory.

Return { onUpdate, onCleanup } to sync on re-render and tear down resources. Many Mates directives (attr, style, onIntersect, onParent) are built on eleHook.

eleHook vs htmlHook vs onConnect

API	Target	Notes
`eleHook`	Host element	Imperative access to `$.el`; must be an element expression.
`htmlHook`	Child part	Renders into a template part (used by timerTemplate, masonryGrid, etc.).
`onConnect`	One-shot connect	Lightweight callback when the element connects — no update loop.

Canvas drawing with eleHook

eleHook receives a $ (DollarChain) bound to the element. Access the raw DOM node via $.el. The returned onUpdate hook re-runs on every re-render so the canvas redraws when the reactive color atom changes.

import { html, atom, eleHook, renderApp } from 'mates';

const App = () => {

const color = atom('#00b3a8');

return () => html`

<canvas

width="300"

height="150"

${eleHook($ => {

const canvas = $.el;

const ctx = canvas.getContext('2d');

const draw = (c) => {

ctx.clearRect(0, 0, 300, 150);

ctx.fillStyle = c;

ctx.beginPath();

ctx.arc(150, 75, 60, 0, Math.PI * 2);

ctx.fill();

ctx.fillStyle = 'rgba(255,255,255,0.2)';

ctx.beginPath();

ctx.arc(130, 55, 20, 0, Math.PI * 2);

ctx.fill();

};

draw(color.val);

return {

onUpdate: () => draw(color.val),

};

})}

></canvas>

<input

type="color"

.value=${color()}

@input=${e => color.set(e.target.value)}

<p class="label">eleHook gives direct DOM access — pick a color to redraw</p>

Focus on mount

eleHook can run one-shot mount logic — focus an input without onConnect.

import { html, eleHook, renderApp } from 'mates';

const App = () => () => html`

<input

placeholder="Focused via eleHook"

${eleHook(($) => { $.el.focus(); })}

</div>

renderApp(App, document.getElementById('app'));

API — eleHook

import { eleHook } from 'mates'

Prop / Option	Type	Default	Description
`eleHook(mountFn)`*	`(...args: A) => DirectiveResult`	—	Returns a directive factory. Call the factory with user args in the template.
`mountFn($, ...args)`*	`EleHookMountFn`	—	Runs once on mount. $ is a DollarChain for the host element ($.el is the HTMLElement).
`return.onUpdate(...args)`	`(...args: A) => void`	`undefined`	Called after every re-render while the directive is attached. Receives the latest user args.
`return.onCleanup()`	`() => void`	`undefined`	Called when the element disconnects. Dispose listeners, observers, third-party instances.

DollarChain ($)

Prop / Option	Type	Default	Description
`$.el`	`HTMLElement`	—	The host DOM element.
`$.attr / $.on / …`	`chain helpers`	—	Fluent helpers for attributes, events, and measurements — same $ used across Mates DOM utilities.