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?
