search

KonnorRogers / shadow-dom-testing-library

An extension of DOM-testing-library to provide hooks into the shadow dom
MIT License
98 stars 2 forks source link

Is it possible to use this to query the shadow DOM for SVGs? #13

Closed jrnail23 closed 2 years ago

jrnail23 commented 2 years ago

When using <use> in SVG, elements referenced by use are rendered in a shadow DOM. I've tried following the approach outlined here to query the shadow DOM via React Testing Library, where it waits for the existence of a host element's shadowRoot property, but in my testing, host.shadowRoot never appears.

Is it possible to get to SVG use elements' shadow DOM descendants with this library?

KonnorRogers commented 2 years ago

@jrnail23 honestly...I haven't tried it, but if it works like regular shadow roots on web components, I don't see why it wouldn't.

jrnail23 commented 2 years ago

Thanks for replying, @KonnorRogers. I learned this the hard way, so I'll save any future knowledge seekers hours of pain and frustration: SVGs don't work the same as regular shadow roots. A least not in Chromium, that is.

I've even tried monkey patching Element.prototype.attachShadow, as I've seen mentioned elsewhere, but that doesn't work because SVG use elements use a special "user agent" shadow DOM, and that's pretty well locked down for security reasons.

The one possibility I can see is if you're using jsdom, and if https://github.com/jsdom/jsdom/issues/2128 is ever resolved (fully supporting SVG in jsdom), then maybe monkey patching attachShadow might work.

KonnorRogers commented 2 years ago

@jrnail23 i haven't had a chance to test it yet, but best guess is the shadowRoots are closed (most WCs use open shadowRoots) shadow-dom-testing-library doesn't touch closed shadow roots.

jrnail23 commented 2 years ago

That's the thing, it's not even a closed shadow root, it's some kind in internal-only private implementation. If it was just a closed shadowRoot, monkey patching attachShadow to always use an open shadowRoot would've worked. 🤷🏻‍♂️