Concerning Popup (semantic-ui-react@2.0.3), I am unable to control where "popup container" appears (e.g. the one you can modify with props.popper). By default it seems to get rendered as a child of <body>.
This is an issue with web components that have a closed shadow DOM. The popup itself works, but any styles contained within the component itself will be invisible to the popup itself. Using the browser inspector, if I move the "popup container" inside the web component shadow DOM, the styles will be applied as normal.
Is there a way to control where the "popup container" appears or is it just a missing feature? I didn't find anything related specifically to this at the SUIR docs or the Popper.js docs.
neutraali
commented
1 year ago
Concerning Popup (
semantic-ui-react@2.0.3), I am unable to control where "popup container" appears (e.g. the one you can modify withprops.popper). By default it seems to get rendered as a child of<body>.This is an issue with web components that have a closed shadow DOM. The popup itself works, but any styles contained within the component itself will be invisible to the popup itself. Using the browser inspector, if I move the "popup container" inside the web component shadow DOM, the styles will be applied as normal.
Is there a way to control where the "popup container" appears or is it just a missing feature? I didn't find anything related specifically to this at the SUIR docs or the Popper.js docs.