The native DOM Element to which the UI fragment will be appended.
The function that defines the UI fragment, typically containing calls to A.
// 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 A from 'aberdeen';
const runTime = A.proxy(0);
setInterval(() => runTime.value++, 1000);
A.mount(document.getElementById('app-root'), () => {
A('h4#Aberdeen App');
A(`p#Run time: ${runTime.value}s`);
// Conditionally render some content somewhere else in the static page
if (runTime.value&1) {
A.mount(document.getElementById('title-extra'), () =>
A(`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, A 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 A inside
funcwill append nodes toparentElement. You can nest derive or other A 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 (derive or A or mount) scope that gets cleaned up, so will the mount.