如何让Vue在Shadow dom中工作 [英] How to get Vue to work in shadow dom

问题描述

我有一个影子dom，其中包含根元素和vue组件.

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>

vue-component.js内部看起来像这样:

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'
// })

如果我在影子dom之外使用此东西，一切都可以正常工作(就像普通人一样).但是，似乎Vue无法处理影子dom内容.我认为如果在影子dom内，它不应该调用document.querySelector.相反，它应该正在运行shadowRoot.querySelector.

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.

推荐答案

---更新---

如果您传递对元素的引用而不是选择器，则Vue将使用该元素.

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---

我为您提供了使用vue-custom-element的一半解决方案.我说了一半，因为它会将您的vue组件放入一个Web组件，并为您提供使其使用影子DOM的选项.这意味着Vue Custom元素也必须是您的shadowRoot.希望这能满足您的需求.

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);

我认为您唯一的其他选择是修改Vue的代码.您可以这样做并创建拉取请求，也可以自行修改.

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.

这篇关于如何让Vue在Shadow dom中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！