Cannot read property clientHeight of null when using height inside of a shadowRoot

[j3ski]

Hello.

I'm trying to use this library inside of a component contained in a shadow root. Once I add the height prop I start getting this error when scrolling.

Here is the minimal reproducible example: https://codesandbox.io/s/small-sun-c5n0i?file=/src/App.js.

And here's the code

import root from "react-shadow";
import InfiniteScroll from "react-infinite-scroll-component";

export default function App() {
  return (
    <root.div>
      <InfiniteScroll dataLength={100} hasMore height="70vh">
        <div style={{ height: "200vh" }}>Scroll me!</div>
      </InfiniteScroll>
    </root.div>
  );
}

It seems that the scroll event can be triggered with a null target in this case, but I don't know exactly why.

[IhorHolovatsky]

Happened to me, too.

It appeared that all events within ShadowRoot have no target property set. But can use event.composedPath() to get actual target element.

I took it from here: https://stackoverflow.com/questions/57963312/get-event-target-inside-a-web-component

Looks like it could be fixed without big efforts