How to handle forward ref if it is created inside a component

[vedantroy]

I have a situation where I create a React component that has a shadow DOM inside using (https://github.com/Wildhoney/ReactShadow):

import { css, styled } from "goober";
import root from "react-shadow";
const App  = () => {
  const setRef2 = useCallback((target: HTMLElement) => {
    const boundcss = css.bind({ target });
    counst boundstyled = styled.bind({ target });
  }, []);

  return (
    <root.div ref={setRef2}>
      <Toaster />
      <style type="text/css">{styles}</style>
      fun!fun!
    </root.div>
  );
}

The issue is, the shadow DOM is not created until the first render. So I can't bind goober till after the first render. I think this creates a problem, because I can only use all the goober functions after the first render.

This is particularly problematic, because I'm consuming a library (https://github.com/timolins/react-hot-toast) that uses goober, and I need it to use the bound functions. Is there a good workaround here?

[cristianbote]

Agh, that's a good problem right here. Hmm, so would the styled here be bound correctly inside react-hot-toast?