Child Window rendering

When rendering in the main browser window, many components will need access to window or document to apply styles, listening for events, or measuring things. However it is possible to render to child windows and elements hosted in iframes. The same technique can be used to render styles in Shadow DOM.

Configure rendering

We need to configure a renderer for makeStyles() and pass a targetDocument to RendererProvider:

import { createDOMRenderer, RendererProvider } from '@griffel/react';
import React from 'react';

function MyComponent(props) {
  const { children, targetDocument } = props;
  const renderer = React.useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);

  return (
    <RendererProvider renderer={renderer} targetDocument={targetDocument}>
      {children}
    </RendererProvider>
  );
}

You can check out the complete example in CodeSandbox.