阴影Dom中的Vue Teleport
上下文：
我有一个Vue应用程序呈现在阴影Dom中。在这里，我有相当多的用例需要传送(https://vuejs.org/guide/built-ins/teleport.html)。
注意，一些用例是基于Primevue：https://www.primefaces.org/primevue/autocomplete的，但是我可以说所有用例用例都是：https://github.com/primefaces/primevue/blob/master/src/components/portal/Portal.vue。
传送需要一个有效的CSS选择器：
期望CSS选择器字符串或实际DOM节点的to目标。在这里，我们实际上是告诉Vue“将这个模板片段传送到body标记”。
问题
但是，除了"self“之外，不可能找到可以钻入影子DOM的CSS选择器。
我可以传送到其他任何地方，但不能进入阴影Dom。
代码与我的尝试：
<HTML>
...
<body>
...
<customComponent id="customElement">
# shadow-root(open)
<div id="mainElement"
...
<Dialog
v-model:visible="showDialog"
appendTo="mainElement"
>
...
<div id="teleportTarget"></div>
...
<teleport
to="#teleportTarget"
>
...我还尝试了一个解决方案：https://forum.vuejs.org/t/how-can-i-use-teleport-inside-a-custom-webelement/130423/2，但与Vue相反，PrimeVue只接受String。即使使用这个解决方案，我也无法使它发挥作用。
async mounted() {
const shadow = document.querySelector("#customElement")?.shadowRoot;
await this.$nextTick(); //I tried with and without nextTick
this.teleportTarget = shadow?.firstElementChild;
console.log(this.teleportTarget); //==> null
},问题
是否有一个查询选择器，可以钻入阴影Dom，可用于Vue传送。
回答 1
Stack Overflow用户
发布于 2022-09-14 14:05:09
似乎，我遇到了一个生命周期问题。解决方案基本上是“延迟”这样的传送端口元素的呈现：
<Dialog
v-if="ready"
:appendTo="teleportTarget"
>
....
data() {
return {
teleportTarget: null,
ready: false,
};
},
mounted() {
this.teleportTarget = this.$el.parentNode.firstElementChild;
this.ready = true;
},我发现使用这个.$el是更"vue-ish“解决方案，但它也适用于文档。
https://stackoverflow.com/questions/73699578
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号