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!
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 theinsertproperty in thesrc/components/portal/portal.tsxfor the Modal component.Describe the solution you'd like
To facilitate global configuration of the
insertproperty for portals, I suggest adding aPortalProviderand integrating it into theEuiProvider. 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!