Add ability to render DNodes to the document body #447
Description
Enhancement
It would be useful to have the ability to render DNodes to the document.body similar to how react portals work.
This would enable us to fix issues where we need to render select / combobox / drop down menus outside of the parent domnode, thus allowing it to render outside of the constraints of any parent node css rules.
We have an open issue on the widgets repo related to select drop down not showing properly when displayed within a parent with overflow: hidden specified, I believe this functionality will fix this.
Proposed implementation
If we implemented this like we did the global event listener then it should be flexible enough for our usage. ie.
import { Body } from '@dojo/framework/vdom';
@watch()
_showMessage = false;
render() {
return (
<div>
<Body>
{ this._showMessage && <div>I render in the body</div> }
</Body>
<button onclick={() => { this._showMessage = true; }}>Click me</button>
</div>
);
}Related issue
dojo/widgets#674