vue-web-component-wrapper
vue-web-component-wrapper copied to clipboard
Delayed slots without ShadowRoot
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