onDOMReady

Run a callback once the DOM is ready for the component.

import { html, onDOMReady } from 'mates';

const Measure = () => {
  onDOMReady(() => {
    // DOM is attached — safe to query / measure
    const el = document.querySelector('.box');
    console.log(el?.getBoundingClientRect());
  });

  return () => html`<div>Hello</div>`;
};

Overview

onDOMReady(fn) subscribes to the component's DOMReadyEvent. The callback runs via a microtask after the template renders into the host — so the DOM nodes exist and can be queried or measured.

Unlike onMount, which runs once after first attach, onDOMReady fires after each render. Return a cleanup from the handler to tear down work from the previous run before the next fire, and on unmount.

Must be called inside a component's outer (setup) function — calling it at module level throws.

onDOMReady vs onMount vs onPaint

API	When it runs	Notes
`onDOMReady(fn)`	After every render (microtask)	DOM is in the host. May return cleanup. Throws outside a component.
`onMount(fn)`	Once after first DOM ready	Preferred for one-shot setup (timers, subscriptions). Sync may return cleanup.
`onPaint(fn)`	After every paint (double rAF)	Runs after the browser has painted. Prefer for layout reads that need post-paint timing.

onDOMReady — measure after render

onDOMReady fires after the component's DOM is ready. This demo measures a box after attach — something that would fail if run before the template rendered.

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

const Measure = () => {

const size = atom('…');

// Fires after each render when the component's DOM is ready.

// Guard atom writes — unconditional set() would re-render forever.

onDOMReady(() => {

const el = document.querySelector('.measure-box');

if (!el) return;

const { width, height } = el.getBoundingClientRect();

const next = Math.round(width) + ' × ' + Math.round(height) + 'px';

if (size() !== next) size.set(next);

});

return () => html`

</div>

<p class="label">Measured via onDOMReady after paint</p>

};

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

API — onDOMReady

import { onDOMReady } from 'mates'

Prop / Option	Type	Default	Description
`onDOMReady(fn)`*	`CleanupFn`	—	Registers fn on the host DOMReadyEvent. Runs via microtask after each template render. May return a cleanup called before the next invocation and on unmount. Must be called in the outer (setup) function.