No animation inside shadow root

[msuess]

When rendering Flipper and Flipped inside shadow dom, the transformation gets applied to the flipped element but the animation does not start.

See this CodeSandbox.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Flipper, Flipped } from "react-flip-toolkit";
import root from "react-shadow";

const AnimatedSquare = () => {
  const [fullScreen, setFullScreen] = useState(false);
  const toggleFullScreen = () => setFullScreen((prevState) => !prevState);

  let style = {
    background: "red",
    width: "200px",
    height: "200px"
  };

  if (fullScreen) {
    style = {
      background: "blue",
      width: "400px",
      height: "400px"
    };
  }

  return (
    <root.div>
      <div style={{ width: "100vw", height: "100vh" }}>
        <Flipper flipKey={fullScreen}>
          <Flipped flipId="square">
            <div style={style} onClick={toggleFullScreen}>
              hi
            </div>
          </Flipped>
        </Flipper>
      </div>
    </root.div>
  );
};

ReactDOM.render(<AnimatedSquare />, document.querySelector("#root"));

[ilyasmez]

Just want to highlight that this is not specific to react-shadow. The library is not working inside shadow DOM in general.

Would love to know if there is a trick to work around this, or any clues to open a PR to fix it.

[ilyasmez]

@aholachek thoughts?