I’m working on a Vue component that contains a custom element with a shadow DOM. I want to test the content inside the shadow root of this custom element using Vue Test Utils. However, when I use wrapper.find("custom-element").html(), it only returns the outer HTML of the wrapper element, not the content inside the shadow DOM.

What I’ve Tried: I’ve tried using

wrapper.find("custom-element").shadowRoot

and

wrapper.find("custom-element").element.shadowRoot

, but I’m still unable to access the HTML inside the shadow DOM. Meaning this below code give null value,

 const root = await wrapper.find("custom-header").element.shadowRoot;
 console.log('***** : ', root.querySelector("nav"))

Note: the web component shadowRoot is open only.

Expected Behavior: I want to be able to access and test the content inside the shadow DOM of the custom element.

What I Need Help With: How can I correctly access the shadow DOM of a custom element in Vue Test Utils and retrieve its HTML content for testing purposes? Are there any additional steps or considerations I need to keep in mind when working with shadow DOMs in unit tests?

Any help would be greatly appreciated! Thank you in advance!