title: CSS of component balise doesn't load inside spefic component
body: <p>I've a problem to load the css of my bloc component.</p>
  <p>The webpage component allow to create an iframe and set some content inside easily.</p>
  <p>It load correctly the template and script tag but not the css (it doesn't load).</p>
  <p>Sometime it works, most of the time, it didn't.</p>
  <p>I was thinking that it was a problem with the loading of the component but no.</p>
  <p>If I load the component before or after the render of my &quot;webpage&quot; component : it don't load.</p>
  <p>I've try with the auto import to true and after to false, but it solve nothing.</p>
  <p>I have 2 components : webpage and bloc.</p>
  <p><em><strong>bloc.vue</strong></em></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;bloc&quot;&gt;
      &lt;p&gt;Le texte&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style&gt;
  .bloc {
    background-color: blue;
    padding: 20px;
  }
  &lt;/style&gt;
  </code></pre>
  <p><em><strong>webpage.vue</strong></em></p>
  <pre><code>&lt;script&gt;
  import Vue from &quot;vue&quot;;
  export default {
    props: {
      css: {
        type: String,
        required: false,
      },
    },
    data() {
      return {
        load: false,
      };
    },
    render(h) {
      return h(&quot;iframe&quot;, {
        on: { load: this.renderChildren },
      });
    },
    beforeUpdate() {
      //freezing to prevent unnessessary Reactifiation 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(&quot;style&quot;);
        style.textContent += this.$props.css;
        head.appendChild(style);
  
        const iApp = new Vue({
          name: &quot;iApp&quot;,
          // freezing to prevent unnessessary Reactifiation of vNodes
          data: { children: Object.freeze(children) },
          render(h) {
            return h(&quot;body&quot;, this.children);
          },
        });
  
        this.iApp = iApp; // cache instance for later updates
        this.iApp.$mount(body); // mount into iframe
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p><em><strong>app.vue</strong></em></p>
  <pre><code>&lt;template&gt;
    &lt;Webpage&gt;
      &lt;component :is=&quot;name&quot;&gt;&lt;/component&gt;
    &lt;/Webpage&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import bloc from &quot;@/components/Bloc&quot;;
  import Webpage from &quot;@/components/Webpage&quot;;
  export default {
    components: {
      bloc,
      Webpage,
    },
    computed: {
      name() {
        return &quot;bloc&quot;;
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Do you have an idea where this might come from ?</p>
  <p>The codesanbox : <a href="https://codesandbox.io/s/error-style-component-import-1t1hs?file=/pages/index.vue" rel="nofollow noreferrer">https://codesandbox.io/s/error-style-component-import-1t1hs?file=/pages/index.vue</a></p>
  <p>Thank you.</p>