Doesn't work when mounted inside a Shadow DOM

[eddiej]

I'm trying to use this in a Chrome extension I've written in react). When the component is mounted on a page under a Shadow DOM, auto scrolling doesn't work at all. If I mount my component directly onto the page (not under the Shadow DOM) it works. Any clues?

[fivecar]

Could this be because the library's dynamically-injected <style/> blocks aren't being copied/reflected over to the shadow DOM? I ended up doing something akin to:

  const HEADER_CLONED_MARKER = "allyourbase";

  document.head
    .querySelectorAll(
      `link:not([${HEADER_CLONED_MARKER}]), style:not([${HEADER_CLONED_MARKER}])`
    )
    .forEach((htmlElement) => {
      const clonedElement = htmlElement.cloneNode(true);

      myShadowWindow.document.head.appendChild(clonedElement);
      htmlElement.setAttribute(HEADER_CLONED_MARKER, "true");
    });

(The code only looks more complicated than it needs to be because it's meant to not re-clone elements you've cloned in a prior call)