render
Dispatched after the doodle has rendered, on the first render and after every update.
Syntax
- doodle.addEventListener('render', handler)
The event bubbles and crosses shadow boundaries. It is dispatched once the new styles are in place,
with the images from @doodle, @shaders, @pattern and @scene drawn,
so the rendered size can be measured in the handler. Fonts from @google-font may still be loading.
It also fires when the element is moved or inserted again, which renders it with the same seed.
A @doodle in @content is a doodle element of its own. It renders separately,
and its render events also reach listeners on the outer doodle; e.composedPath()[0] tells them apart.
Examples
const doodle = document.querySelector('css-doodle');
doodle.addEventListener('render', () => {
console.log('rendered with seed', doodle.seed);
});