Support rendering nodes to the document body

src/core/vdom.ts

@@ -245,6 +245,10 @@ function isVirtualWrapper(child?: DNodeWrapper | null): boolean {
 	return isVNodeWrapper(child) && child.node.tag === 'virtual';
 }
 
+function isBodyWrapper(wrapper?: DNodeWrapper): boolean {
+	return isVNodeWrapper(wrapper) && wrapper.node.tag === 'body';
+}
+
 function isAttachApplication(value: any): value is AttachApplication | DetachApplication {
 	return !!value.type;
 }
@@ -1917,14 +1921,17 @@ export function renderer(renderer: () => RenderResult): Renderer {
 		let mergeNodes: Node[] = [];
 		const parentDomNode = findParentDomNode(next)!;
 		const isVirtual = isVirtualWrapper(next);
+		const isBody = isBodyWrapper(next);
 		if (!next.domNode) {
 			if ((next.node as any).domNode) {
 				next.domNode = (next.node as any).domNode;
 			} else {
 				if (next.node.tag === 'svg') {
 					next.namespace = NAMESPACE_SVG;
 				}
-				if (next.node.tag && !isVirtual) {
+				if (isBody) {
+					next.domNode = global.document.body;
+				} else if (next.node.tag && !isVirtual) {
 					if (next.namespace) {
 						next.domNode = global.document.createElementNS(next.namespace, next.node.tag);
 					} else {
@@ -1961,13 +1968,14 @@ export function renderer(renderer: () => RenderResult): Renderer {
 				next.childrenWrappers = renderedToWrapper(next.node.children, next, null);
 			}
 		}
-		const dom: ApplicationInstruction | undefined = isVirtual
-			? undefined
-			: {
-					next: next!,
-					parentDomNode: parentDomNode,
-					type: 'create'
-			  };
+		const dom: ApplicationInstruction | undefined =
+			isVirtual || isBody
+				? undefined
+				: {
+						next: next!,
+						parentDomNode: parentDomNode,
+						type: 'create'
+				  };
 		if (next.childrenWrappers) {
 			return {
 				item: {
@@ -2006,6 +2014,7 @@ export function renderer(renderer: () => RenderResult): Renderer {
 
 	function _removeDom({ current }: RemoveDomInstruction): ProcessResult {
 		const isVirtual = isVirtualWrapper(current);
+		const isBody = isBodyWrapper(current);
 		_wrapperSiblingMap.delete(current);
 		_parentWrapperMap.delete(current);
 		if (current.id) {
@@ -2021,10 +2030,10 @@ export function renderer(renderer: () => RenderResult): Renderer {
 				instanceData && instanceData.nodeHandler.remove(current.node.properties.key);
 			}
 		}
-		if (current.hasAnimations || isVirtual) {
+		if (current.hasAnimations || isVirtual || isBody) {
 			return {
 				item: { current: current.childrenWrappers, meta: {} },
-				dom: isVirtual ? undefined : { type: 'delete', current }
+				dom: isVirtual || isBody ? undefined : { type: 'delete', current }
 			};
 		}
 

tests/core/unit/vdom.ts

@@ -5,7 +5,6 @@ import { spy, stub, SinonSpy, SinonStub } from 'sinon';
 import { add } from '../../../src/core/has';
 import { createResolvers } from './../support/util';
 import sendEvent from '../support/sendEvent';
-
 import {
 	create,
 	renderer,
@@ -3715,6 +3714,55 @@ jsdomDescribe('vdom', () => {
 		});
 	});
 
+	describe('body node', () => {
+		let root = document.createElement('div');
+		beforeEach(() => {
+			root = document.createElement('div');
+			document.body.appendChild(root);
+		});
+
+		afterEach(() => {
+			document.body.removeChild(root);
+		});
+
+		it('can attach a node to the body', () => {
+			let show = true;
+			const factory = create({ invalidator });
+			const App = factory(function App({ middleware: { invalidator } }) {
+				return v('div', [
+					v('button', {
+						onclick: () => {
+							show = !show;
+							invalidator();
+						}
+					}),
+					v('body', [show ? v('div', { id: 'my-body-node-1' }, ['My Body Div 1']) : null]),
+					v('body', [show ? v('div', { id: 'my-body-node-2' }, ['My Body Div 2']) : null])
+				]);
+			});
+			const r = renderer(() => w(App, {}));
+			r.mount({ domNode: root });
+			let bodyNodeOne = document.getElementById('my-body-node-1')!;
+			assert.isOk(bodyNodeOne);
+			assert.strictEqual(bodyNodeOne.outerHTML, '<div id="my-body-node-1">My Body Div 1</div>');
+			assert.strictEqual(bodyNodeOne.parentNode, document.body);
+			assert.isNull(root.querySelector('#my-body-node-1'));
+			let bodyNodeTwo = document.getElementById('my-body-node-2')!;
+			assert.isOk(bodyNodeTwo);
+			assert.strictEqual(bodyNodeTwo.outerHTML, '<div id="my-body-node-2">My Body Div 2</div>');
+			assert.strictEqual(bodyNodeTwo.parentNode, document.body);
+			assert.isNull(root.querySelector('#my-body-node-2'));
+			sendEvent(root.childNodes[0].childNodes[0] as Element, 'click');
+			resolvers.resolve();
+			bodyNodeOne = document.getElementById('my-body-node-1')!;
+			assert.isNull(bodyNodeOne);
+			assert.isNull(root.querySelector('#my-body-node-1'));
+			bodyNodeTwo = document.getElementById('my-body-node-2')!;
+			assert.isNull(bodyNodeTwo);
+			assert.isNull(root.querySelector('#my-body-node-2'));
+		});
+	});
+
 	describe('virtual node', () => {
 		it('can use a virtual node', () => {
 			const [Widget, meta] = getWidget(v('virtual', [v('div', ['one', 'two', v('div', ['three'])])]));