The native DOM Element to which the UI fragment will be appended.
The function that defines the UI fragment, typically containing calls to $.
// Create a pre-existing DOM structure (without Aberdeen)
document.body.innerHTML = `<h3>Static content <span id="title-extra"></span></h3><div class="box" id="app-root"></div>`;
import { mount, $, proxy } from 'aberdeen';
const runTime = proxy(0);
setInterval(() => runTime.value++, 1000);
mount(document.getElementById('app-root'), () => {
$('h4:Aberdeen App');
$(`p:Run time: ${runTime.value}s`);
// Conditionally render some content somewhere else in the static page
if (runTime.value&1) {
mount(document.getElementById('title-extra'), () =>
$(`i:(${runTime.value}s)`)
);
}
});
Note how the inner mount behaves reactively as well, automatically unmounting when it's parent observer scope re-runs.
Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of this function, $ will assume
document.bodyas its root.It creates a top-level reactive scope associated with the
parentElement. The provided functionfuncis executed immediately within this scope. Any proxied data read byfuncwill cause it to re-execute when the data changes, updating the DOM elements created within it.Calls to $ inside
funcwill append nodes toparentElement. You can nest observe or other $ scopes withinfunc. Use unmountAll to clean up all mounted scopes and their DOM nodes.Mounting scopes happens reactively, meaning that if this function is called from within another (observe or $ or mount) scope that gets cleaned up, so will the mount.