How to Access the Shadow DOM of a Custom Element in Vue Vitest

Question

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!

It's unknown what your setup is. Config? Do you use jsdom? Which version? "but I’m still unable to access the HTML inside the shadow DOM" - what does happen? — Estus Flask
– Estus Flask, Commented Mar 17 at 15:11
I'm using nuxt js with vitest and using jsdom and "vitest": "3.0.8". I'm also unable to access the html inside shadow DOM — SandyKrish
– SandyKrish, Commented Mar 17 at 16:44
Which jsdom version? What exactly does " unable to access the html inside shadow DOM" mean? Is it null, or undefined, or empty string? What code do you use for testing that fails? What is source code for the tested component? — Estus Flask
– Estus Flask, Commented Mar 17 at 16:46
Is it root.querySelector("nav") or root that is null? What about "What is source code for the tested component"? The question currently lacks clear problem statement. Jsdom supports shadow dom in general afaik, but it may have problems with web components in case you use them. The problem is specific to your case. It's possible that the element really doesn't exist at the time it's accessed. The question needs stackoverflow.com/help/mcve to rule this out. I'd suggest to check first if something changes if you use happy-dom instead of jsdom, which vitest supports too — Estus Flask
– Estus Flask, Commented Mar 18 at 0:53

Claudiu · Accepted Answer · 2025-07-12 10:40:16Z

0

I was able to test shadow root / web component using element

it('Testing email', async() => {
  const component = await mountSuspended(Form)

  component.find('nord-input').element.value = '[email protected]'
  await component.find('nord-input').trigger('input')

  console.log(component.find('nord-input').element.value) // '[email protected]'
  console.log('VM', component.vm.form.value.email)        // '[email protected]'

})

answered Jul 12 at 10:40

Claudiu

4,1842 gold badges40 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Access the Shadow DOM of a Custom Element in Vue Vitest

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related