Using the body or its direct decendents as mount points is a common pattern in modern javascript applications (Solid, Vue, React, etc.).
We can declaratively abstract this away as imports.
Use body element as a mount point.
Note: Some applications including react, warn against using the body element as a mount point. Use 'first' or 'last' instead.
import { render } from "solid-js/web";
import Application from "./Soild-Application";
import body from "mounts/body.mjs";
render(() => <Application />, body);
Use body's first child as a mount point.
Creates and prepends a new 'div' element if child is "unsuitable" or non-existent.
import Application from "./Vue-Application";
import first from "mounts/first.mjs";
Application.mount(first);
Use body's last child as a mount point.
Creates and appends a new 'div' element if child is "unsuitable" or non-existent.
import { createRoot } from "react";
import Application from "./React-Application";
import last from "mounts/last.mjs";
const root = createRoot(last);
root.render(Application);
The following elements are considered "unsuitable" for mounting: