Vue breaks Declarative Shadow DOM

[LeaVerou]

Vue version

3

Link to minimal reproduction

https://codepen.io/leaverou/pen/wBwLmKv

Steps to reproduce

The testcase contains two otherwise identical elements. One is left as-is, and the other is initialized as a Vue app that does nothing.

What is expected?

Both elements should display "Shadow content"

What is actually happening?

The Vue app element has lost its shadow DOM and is now displaying "Light content"

System Info

Any additional comments?

This is happening because the shadow root is not visible when elements are serialized (e.g. via outerHTML, innerHTML and the like). The only way to find out that it exists is to check the element’s shadowRoot property, which requires a full traversal (though that might be okay as it’s a one-time cost?). If a full traversal is out of the question, perhaps a solution could be to provide an attribute developers can use to mark these elements. And obviously closed shadow roots are beyond saving.