Using Vike + SSG in a Shadow DOM context

[timbolimboslice]

I'm using Vike to create small components that are deployed to a Netlify site. I have another website (in WordPress) that grabs the contents of a given URL on my Netlify site and embeds the HTML content into a section on my WordPress site. This has been working great in most cases. However, in one instance, I'm running into some styling issues with the WordPress stylesheet interfering with the embedded Vike component.

I decided to try placing the Vike component into a Shadow DOM. This resolved all my style collisions, but the problem I'm dealing with now appears to be some type of race condition. On some page loads, the component is loaded into the shadow DOM without any problems. Other times, I get the following error:

Uncaught (in promise) Error: Unhandled Promise Rejection: [vike][Wrong Usage] Couldn't find #vike_pageContext (which Vike automatically injects in the HTML): make sure it exists (i.e. don't remove it and make sure your HTML isn't malformed)

I'm guessing that in the process of moving elements into the shadow DOM, Vike can't find that script. I've been looking over the documentation to find if there is some type of hook that I could use to initialize my Vike component on my own, once the shadow DOM has been created. Is something like that possible? Or any other suggestions for this use case? Thanks in advance!

My vite config for reference:

import react from "@vitejs/plugin-react";
import vike from "vike/plugin";

const BASE_URL = process.env.BASE_URL ?? "/";

export default {
  plugins: [react({ jsxRuntime: "automatic" }), vike({ prerender: true })],
  build: {
    outDir: "./public",
  },
  base: BASE_URL,
  ssr: {
    noExternal: ["gsap"],
  },
};

[brillout]

Indeed, Vike has a hard requirement for #vike_pageContext to exist in the DOM. Maybe there could be an option to change how Vike retrieves that element, but I ain't sure how that would help you.