Internal issue 3164 - Canary web components not rendering

h3. Summary of the bug

The shadow DOM is not being populated on the page for any canary web components. But works perfectly fine with anything non-canary as well as canary react components.

h3. 🧐 Expected behaviour

The shadow DOM should be populated, like what happens with canary react, and non-canary components. And the component should be visible on the page.

h3. 🚨 Urgency (low, medium or high)

Low

h3. Additional info

We use Vite to bundle and pre-hydrate the web components, but our apps use webpack to actually build the UIs.

So we have a file that references the web-component loaders, then we use Vite to bundle this into a hashed file. Which essentially contains the hydrated web component code. It is this file that gets passed in to our root page in the script.

In one app we use NextJS, everything functions as expected, web components render and work as we would wish them to whether the regular ICDS web components, or canary web components.

In the other we use express with a pretty standard webpack config setup; it is this app where the canary web components never display.

We use the same custom components library in both apps (built using ICDS web components), and the regular web components behave identically. But for some reason the canary components just refuse to display in the express based app. Its very odd.

We can work around the issue by using the react canary components for now but it certainly isn't desirable to be maintaining 2 almost identical components. Thanks!

Start by reproducing a canary web component in the Express app using the hashed Vite bundle that contains the web-component loaders. Compare its behavior with the same bundle in the NextJS app and with non-canary components. Done means the canary component's shadow DOM is populated and the component is visible in the Express-based UI.

Written by the indexing model from the issue text.