title: How to get Vue to work in shadow dom
body: <p>I have a shadow dom which contains the root element and a vue component.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="http://my-site.com/app/js/vue-component.js"&gt;&lt;/script&gt;
  &lt;/template&gt;
  
  &lt;div id="hostElement"&gt;&lt;/div&gt;
  &lt;script&gt;
  // create shadow DOM on the &lt;p&gt; element above
  const shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'});
  const template = document.querySelector('template');
  shadow.appendChild(document.importNode(template.content, true));
  &lt;/script&gt;
  </code></pre>
  
  <p>Inside the <code>vue-component.js</code> looks something like this:</p>
  
  <pre><code>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'
  // })
  </code></pre>
  
  <p>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 <code>document.querySelector</code> if it's inside the shadow dom. Instead, it should be running <code>shadowRoot.querySelector</code>.</p>
  
  <p>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.</p>