Delayed slots without ShadowRoot
Closed this issue · 3 comments
First of all: thanks for the 1.5 release without the ShadowRoot, I have been looking for this solution for so long (I have to deal with a legacy Vue application that requires a lot of hacks in order to get the CSS and the event propagation working).
I have seen one catch though, is that sometimes my slots are not available when the parent is mounted (slot is dynamic), and in the case as the Slot processing is performed only once, the slot is not properly replaced.
I have modified the index.html of your stackblitz to reproduce the issue and you can reproduce by adding this into the index.html
setTimeout(() => {
const customDiv = document.createElement("div");
customDiv.slot = "customName";
customDiv.innerHTML = "I am a custom named slot"
myWebComponent.appendChild(customDiv);
}, 4000)
Is this a limitation of Slots ? Do you have an idea on how to solve that ? Maybe we could use the MutationObserver (_ob) to watch for the children and re-process the slots in the component ?
Edit: I also think that there is a bug when using child.innerHTML
in the slot as it will push the raw html and vue will render it as a string
Hi @ex0ns, nice catch, I wonder if you don't experience the same issue in the vue2.7 web component?
I need to think about this, as the design is not reactive currently.
I'm working on support for async instantiation, please let me know if you want to test this feature