Vue Teleport внутри теневого дома
Контекст:
У меня есть приложение Vue, отображаемое внутри теневого дома. Там у меня довольно много вариантов использования, где мне нужны телепорты (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:
Цель to ожидает строку селектора CSS или фактический узел DOM. Здесь мы, по сути, говорим Vue «телепортировать этот фрагмент шаблона в тег body».
Проблема
Однако, за исключением «я», не удалось найти селектор 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 принимает только строки. Даже если я использовал это решение, я не смог заставить его работать.
async mounted() {
const shadow = document.querySelector("#customElement")?.shadowRoot;
await this.$nextTick(); //I tried with and without nextTick
this.teleportTarget = shadow?.firstElementChild;
console.info(this.teleportTarget); //==> null
},
Вопрос
Есть ли селектор запросов, который может углубиться в теневой дом, который можно использовать для телепортов Vue.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Кажется, я столкнулся с проблемой жизненного цикла. Решение заключалось в том, чтобы «задержать» рендеринг элемента телепорта следующим образом:
<Dialog
v-if = "ready"
:appendTo = "teleportTarget"
>
....
data() {
return {
teleportTarget: null,
ready: false,
};
},
mounted() {
this.teleportTarget = this.$el.parentNode.firstElementChild;
this.ready = true;
},
Я обнаружил, что использование this.$el является более «виртуальным» решением, но оно также работает с document.
«Но в отличие от Vue, PrimeVue принимает только строки» — нет, он принимает те же значения, что и телепорт, это можно увидеть в исходном коде, свойство appendTo просто набирается таким образом. Попробуйте использовать
const shadowпосле nextTick. Обычно это делается так, если это не работает, пожалуйста, предоставьте способ отладки