Delayed slots without ShadowRoot

[ex0ns]

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

[EranGrin]

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.

[EranGrin]

I'm working on support for async instantiation, please let me know if you want to test this feature

[ex0ns]

@EranGrin Thanks ! I am unfortunately not working on this project anymore and don't have access to the codebase I might have a toy repository somewhere where I could try the feature, but I might not be able to give you feedback before quite some time