## mount · function

Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
this function, | A will assume `document.body` as its root.

It creates a top-level reactive scope associated with the `parentElement`. The provided
function `func` is executed immediately within this scope. Any proxied data read by `func`
will cause it to re-execute when the data changes, updating the DOM elements created within it.

Calls to | A inside `func` will append nodes to `parentElement`.
You can nest `derive` or other | A scopes within `func`.
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.

**Signature:** `(parentElement: Element, func: () => void) => void`

**Parameters:**

- `parentElement: Element` - - The native DOM `Element` to which the UI fragment will be appended.
- `func: () => void` - - The function that defines the UI fragment, typically containing calls to | A.

**Examples:**

Basic Mount
```javascript
// 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.