Use DiffViewer inside Shadow DOM

[VladyslavKvaskov]

trafficstars

Hello I use DiffViewer inside shadow DOM The problem I have is that styles are appended to the document's head, so they do not affect the ui of DiffViewer since it's rendered inside of shadow DOM. Is there any way to specify the target to which the styles should be appended???

[VladyslavKvaskov]

I had to solve it using JS.

React.useEffect(() => {
  const styles = document.head.querySelectorAll('style[data-emotion="css"]');
  styles.forEach((styleElement) => {
    targetElement.appendChild(styleElement);
  });
}, []);

where targetElement is the element you want to move the styles to

[VladyslavKvaskov]

Using emotion createCache and CacheProvider, a container to which the styles will be appended, could be provided So please add the ability to specify an element of the container.