Michael Beckemeyer
Hi there,
we're looking at using complex web components using ark / chakra v3. So far the support for Shadow DOMs etc. looks great! We do have one request: it would be nice to override the Portal's default container.
Currently, <Portal /> will render its children either in the explicit container (via props) or in the root node (shadow root or document body). However, we would like to force the Portal to render in a
specific child
of the root node when no explicit
container
has been specified.
Essentially, I am proposing something like a <PortalProvider />, see pseudo code:
<EnvironmentProvider value={shadowRoot}>
<PortalProvider container={container}>
<ChakraProvider value={system}>{restOfTheApplication}</ChakraProvider>
</PortalProvider>
</EnvironmentProvider>
(alternatively, the portal container could also be passed via the
EnvironmentProvider
, as an additional prop)
Implementation could be rather simple, adding another alternative to the expression for
mountNode
: https://github.com/chakra-ui/ark/blob/16620c0b00294d4b3ca65dd0c78f6895d7ff9a1c/packages/react/src/components/portal/portal.tsx#L34
I would also be happy to implement this in a PR if you agree with the general direction.