Add mount node/container prop to Portal and Popover to configure mount node

[dwilt]

🚀 Feature request

Current Behavior

We are currently using the Popover component for our web app popovers and would like the ability to change the container of the underlying Portal. By default, the Reach Portal appends the children to the end of the body, which is great, but in fact we'd like to be able to append it to our root app container to prevent z-index like collisions with 3rd party applications (such as Intercom)

Desired Behavior

Add a container prop to the Popover (and thus Portal component) that follow the same api as the React Portal so the node the portal is mounted to can be configured

Suggested Solution

Add container/mountNode prop to PortalProps which then bubbles up to the PopoverProps so an element, besides the end of the body, can be used as the mount node.

Who does this impact? Who is this for?

Anyone who would want to customize the mount node

Describe alternatives you've considered

1. I've tried setting the z-index of our third party applications code but that has been difficult and will not scale.
2. I was thinking of looking at other popover libraries which expose the mount node but we're pretty heavily invested in reach/ui so I made an issue :)

Additional context

The image below shows our app with the portal open (the large left hand floating menu).

If you look at the DOM, the <reach-portal> is after the <div id="intercom-css-container" /> and thus sits on top of the intercom widget. And since we have an invisible button to close the panel that is open, it's sitting on top of the Intercom widget preventing our users from interacting with Intercom while a portal is open.

[JakeSchroeder]

Any updates?