[Portal] Add possibility to specify the container in which the portal is rendered

[Drogglbecher]

🚀 Feature request

Current Behavior

I want to implement the MenuButton within a component with fullscreen option. The current implementation of the portal only allows children as props and renders the popover menu as child of body.

This behaviour is implemented in the followig CodeSandbox Template (You have to open the app in a new window to ensure fullscreen is working)

Desired Behavior

It would be nice to specify the component content the portal is rendered in and allow to access this for all components using a portal.

Suggested Solution

I think a good way could be adding a prop to the Portal like the portalContainer prop of blueprints popover component

[john-oliveoil]

A feature like this, to allow us to specify the container or specify the node where the portal should be rendered, is essential for us.

Why not just have a prop called node that allows us to specify a custom DOM element for the portal (if not specified then it would still append to the body as now). Basically the same as react-portal.

This additional prop should extend to the other Reach packages (e.g. reach/dialog).

Without this feature it makes it impossible for us to correctly use this library in combination with the ShadowDOM. We do like Reach, but without this option, we have been considering dropping it in favor of other libraries. So please do consider adding this in a future (hopefully soon) version.

[selrond]

Already mentioned in #571

Another use case: say you have notification toasters / whatever UI element / you need to ensure is always on top of everything else.

In its current implementation, @react/dialog (which usese @reach/portal under the hood) just always appends portal node to body making it always the last child of body, which in turn makes it impossible to layer anything else on top of it in a predictable way.

So the underlying issue is that @react/portal makes an assumption that it should always be the last element in the DOM when rendered.