How to load styles in vuejs with shadow dom mode on?

Viewed 554

I have this setup below. Basically, I am loading the vuejs app into a shodow dom.

It works fine, but my CSS is not loading from that embed.css URL I have.

Any suggestions on how to load that CSS into shadow dom? Thank you!

   <template>
        <div id="app" v-shadow>
          <shadow-root>
            <link rel="stylesheet" type="text/css" href="http://example.com/embed.css">
            <div class="container">
              <div>{{ this.successMessage.message }}</div>
                <form @submit.prevent="submit" ref="form" id="appId">
                  <form-builder v-bind:schema="formSchema"></form-builder>
                </form>
            </div>
          </shadow-root>
        </div>
    </template>

<script>
   import Vue from 'vue'
   import FormBuilder from "./formBuilder"
   import shadow from 'vue-shadow-dom'
   Vue.use(shadow)
</script>
0 Answers
Related