I'm facing an issue with loading the CSS of my bloc component.
The webpage component allows for easily creating an iframe and setting content inside.
While it correctly loads the template and script tags, the CSS doesn't always load properly.
Sometimes it works, but most of the time, it doesn't.
I initially thought it was a loading issue with the component itself, but that's not the case.
Whether I load the component before or after rendering my "webpage" component, the CSS still won't load.
I've tried changing the auto import to true and then false, but it doesn't resolve the issue.
I have 2 components: webpage and bloc.
bloc.vue
<template>
<div class="bloc">
<p>The text</p>
</div>
</template>
<style>
.bloc {
background-color: blue;
padding: 20px;
}
</style>
webpage.vue
<script>
import Vue from "vue";
export default {
props: {
css: {
type: String,
required: false,
},
},
data() {
return {
load: false,
};
},
render(h) {
return h("iframe", {
on: { load: this.renderChildren },
});
},
beforeUpdate() {
//freezing to prevent unnecessary Reactification of vNodes
this.iApp.children = Object.freeze(this.$slots.default);
},
mounted() {
if (!this.load) this.renderChildren();
},
methods: {
// https://forum.vuejs.org/t/render-inside-iframe/6419/12
renderChildren() {
this.load = true;
const children = this.$slots.default;
const head = this.$el.contentDocument.head;
const body = this.$el.contentDocument.body;
let style = this.$el.contentDocument.createElement("style");
style.textContent += this.$props.css;
head.appendChild(style);
const iApp = new Vue({
name: "iApp",
// freezing to prevent unnecessary Reactification of vNodes
data: { children: Object.freeze(children) },
render(h) {
return h("body", this.children);
},
});
this.iApp = iApp; // cache instance for later updates
this.iApp.$mount(body); // mount into iframe
},
},
};
</script>
app.vue
<template>
<Webpage>
<component :is="name"></component>
</Webpage>
</template>
<script>
import bloc from "@/components/Bloc";
import Webpage from "@/components/Webpage";
export default {
components: {
bloc,
Webpage,
},
computed: {
name() {
return "bloc";
},
},
};
</script>
Any insights on where this issue might be stemming from?
Link to the codesandbox: https://codesandbox.io/s/error-style-component-import-1t1hs?file=/pages/index.vue
Thank you.