Open eddiej opened 3 months ago
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)
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?