Rendering a Vue app in Shadow DOM using Custom Element

So I have a full featured Vue 3 app that I need to embed on random page somewhere, but I don’t want to use an iframe for various reasons so I’m looking to achieve this using Shadow DOM and Custom Element.

The way I thought it would work:

  • ✅ Build the Vue App
  • ✅Publish the dist folder
  • ✅Create a Custom Element
  • ✅Create Shadow DOM in the constructor
  • ✅Load dist/index.html
  • ❌ Vue App renders in Shadow DOM

… except it doesn’t. Everything technically works but the Vue app doesn’t render at all.

enter image description here

What am I missing?

My attempt: https://stackblitz.com/edit/javascript-7trm5i?devtoolsheight=33&file=index.html