Mounts

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.

Usage

Body

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);

First

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);

Last

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);

Unsuitable elements

The following elements are considered "unsuitable" for mounting: