vue-web-component-wrapper icon indicating copy to clipboard operation
vue-web-component-wrapper copied to clipboard

Delayed slots without ShadowRoot

Open ex0ns opened this issue 8 months ago • 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

ex0ns avatar Jun 11 '24 16:06 ex0ns