How to get Vue to work in shadow dom

Question

I have a shadow dom which contains the root element and a vue component.

<template>
    <div class="container">
        <div id="app"></div>
    </div>
    <script src="http://my-site.com/app/js/vue-component.js"></script>
</template>

<div id="hostElement"></div>
<script>
// create shadow DOM on the <p> element above
const shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'});
const template = document.querySelector('template');
shadow.appendChild(document.importNode(template.content, true));
</script>

Inside the vue-component.js looks something like this:

import Vue from 'vue';

const shadow = document.querySelector('#hostElement').shadowRoot;

new Vue({
    el: shadow.querySelector('#app'),
    // ...
})

// this doesn't work because I think Vue is using document.querySelector('#app')
// instead of the required document.querySelector('#hostElement').shadowRoot.querySelector('#app')
// new Vue ({
//     el: '#app'
// })

Everything works fine if I use this stuff outside the shadow dom (like regular people do). However, it seems like Vue isn't able to handle shadow dom stuff. I believe it shouldn't be calling document.querySelector if it's inside the shadow dom. Instead, it should be running shadowRoot.querySelector.

Please let me know if this is confusing at all, I'm in a uncommon use case scenario so it is a little hard to explain.

Answer 1

---Update---

If you pass a reference to an element instead of a selector, Vue will use the element.

let element = document.querySelector('#host-element').shadowRoot.querySelector('#your-future-vue-component');
new Vue({
  el: element,
  ...
})

---Old Stuff---

I have half a solution for you using vue-custom-element. I say half, because it puts your vue component into a webcomponent and gives you the option to have it use the shadow DOM. This means that the Vue Custom element will also have to be your shadowRoot. Hopefully this suits your needs.

https://github.com/karol-f/vue-custom-element

import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import app from './app.vue';

Vue.use(vueCustomElement);
Vue.customElement("my-element", app, {shadow: true});
myShadowElement = document.createElement('my-element');
document.body.appendChild(myShadowElement);

The only other option I think you have is to go modify Vue's code. You could do so and create a pull request, or just hack it for yourself.