[EuiPortal] Shadow DOM Support for Portal-Based Components (e.g., Modal, Overlay Mask)

[y1j2x34]

Is your feature request related to a problem? Please describe.

I'm developing a browser extension project using Elastic UI (EUI) and would like to render EUI components within the Shadow DOM to isolate styles and avoid conflicts. However, I noticed that the Modal component's DOM elements are automatically inserted into the document.body, and I can't specify the target location for insertion. Specifically, I'm unable to utilize the insert property in the src/components/portal/portal.tsx for the Modal component.
Describe the solution you'd like

To facilitate global configuration of the insert property for portals, I suggest adding a PortalProvider and integrating it into the EuiProvider. This would allow for seamless management and customization of the insertion behavior of portal-based components.

Additional context

Example Repo: https://github.com/y1j2x34/eui-shadow-dom-example

After clicking the "Open Modal" button, a div element with the attribute value "data-euiportal" is generated, which should be inserted at the location pointed to by the arrow for isolated CSS styling.

This issue may be due to my inability to find the correct usage. I would greatly appreciate your response as it would be very helpful for me. Thank you very much!

[cee-chen]

To facilitate global configuration of the insert property for portals, I suggest adding a PortalProvider and integrating it into the EuiProvider.

Fascinating idea! We've been discussing adding more non-Emotion defaults to EuiProvider as of late and this certainly seems like a useful candidate. Timeline wise, we likely won't be able to get to this immediately as a heads up.

Just out of curiosity, would adding one-off props (e.g. portalProps to EuiOverlyMask and overlayMaskProps to EuiModal) work in the interim? Or do you absolutely need a global setting for portal injection?

[y1j2x34]

Just out of curiosity, would adding one-off props (e.g. portalProps to EuiOverlyMask and overlayMaskProps to EuiModal) work in the interim? Or do you absolutely need a global setting for portal injection?

Yes, adding one-off props like portalProps to EuiOverlayMask and overlayMaskProps to EuiModal can actually solve the problem without the need for a global setting. Although it might be a bit more cumbersome, it should still get the job done.

[cee-chen]

One-off props will likely be our approach for now, as we can implement that quickly (within the next week or so), whereas wiring up EuiProvider<->EuiPortal will likely take longer. Additionally, it's certainly possible that consumers will want to customize both the global setting and where specific modals portal into, so I think both options should be implemented for maximum flexibility.

We'll keep this issue open until a global insert configuration is available for portals - thanks again for the great suggestion!

[cee-chen]

Closed by #6941 and #6995. This feature will be in next week's EUI release (v87). API usage will look like this:

<EuiProvider componentDefaults={{ EuiPortal: insert: { ... } }}>
  <App />
</EuiProvider>

Thanks again for your contribution @y1j2x34 and helping kick off this work for us!