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

[jrnail23]

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]

@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]

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 jsdom/jsdom#2128 is ever resolved (fully supporting SVG in jsdom), then maybe monkey patching attachShadow might work.

[KonnorRogers]

@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]

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. 🤷🏻‍♂️