Vue version

3.2.37

Link to minimal reproduction

https://codepen.io/leaverou/pen/abYByOO?editors=1010

Steps to reproduce

Visit testcase.

What is expected?

Both custom elements should render identically

What is actually happening?

The custom element inside the Vue app renders an empty iframe, because the <template> element's content is being emptied by Vue. Template elements inside the app but not inside a custom element do retain their contents.

System Info

No response

Any additional comments?

No response

This is an interesting one, and it has nothing to do with custom elements.

Vue does not re-use the actual template element that you defined in the #app element. That content is parsed as a Vue-template, converted into a render function and when Vue then renders the app, it will re-create the content dynamically. That means, it also re-creates the <template> element dynamically.

Creating a template needs special handling when it comes to appending children - you can't do that like for normal elements. We don't handle it right though, we just append to it like we would do for all other elements:

// pseudocode
const b = document.createElement('b')
b.innerText = 'Hello World'
const el = document.createElement('template')
el.appendChild(b)

What we would have to do is something like:

const b = document.createElement('b')
b.innerText = 'Hello World'
const el = document.createElement('template')
el.innerHTML = b.outerHTML

related: https://github.com/vuejs/core/issues/4613 (has workaround)

will fix this case

I have the same issue :(

then the workaround will work for you too.