Vue 3. Vite, createApp() and include CSS from single file components within iframe

Bit of a tricky one and a unique use case.

I have a Vue 3 app, developing and building using Vite. i am instantiating a second Vue 3 app instance inside an iframe, relevant code pasted below. As i need unpolluted components and styles available for the second app in the iframe.

import { h, ref, createApp, onMounted, onBeforeUnmount, onBeforeUpdate } from "vue"

export default {
  setup(props, { attrs, slots, emit, expose }) {
  
        const iframeRef = ref(null)
        const iframeBody = ref(null)
        const iframeHead = ref(null)
        const iframeStyle = ref(null)
        let app = null
        let emitSelection;
   
onMounted(() => {
  iframeBody.value = iframeRef.value.contentDocument.body
  iframeHead.value = iframeRef.value.contentDocument.head
  const el = document.createElement("div")
  iframeBody.value.appendChild(el)
  app = createApp(MySecondAppLayout, props)
  app.use(MyUILibrary);
  app.mount(el)
})

return () => h("iframe", { ref: iframeRef })


}

Everything is working great, the second app instance imports it's own components and mount and behave correctly within the iframe. However, the SCSS/CSS styles are not included within the iframe context.

Is what i am attempting to do impossible? Or is there a tag i can inject into the iframe to include the styles from the imported components?

Alternatively should i/can i get vite output the style sheets from all of the single file components as a text file so i can paste it in manually at the top of the iframe?