[BUG] Does not work in a web component

[imolorhe]

Describe the bug

Hey, any reason for not just passing this.paper.svg to svgPanZoom, instead of passing the SVG ID selector? I can see that svgPanZoom supports passing the svg element and not just the selector (https://github.com/ariutta/svg-pan-zoom/blob/master/src/svg-pan-zoom.js#L940).

Currently trying to integrate birdseye as a web component but this line causes svgPanZoom to fail when it tries to get the svg element using document.querySelector when the selector is passed instead of the element, with this error (Provided selector did not find any elements. Selector: #v-26). document.querySelector doesn't search through the shadow DOM of web components which is why it doesn't find the element. Passing the SVG element directly, svgPanZoom doesn't need to query the DOM for the element.

To Reproduce
Steps to reproduce the behavior:

1. Wrap birdseye as a web component

Expected behavior
It should work when wrapped as a web component

Package
The package this issue pertains to (i.e. core, react, etc.).
core

[rohit-ravikoti]

Hey @imolorhe!

I can definitely get working on this-- schedule has been a bit crazy lately, but will try to get it done this week. If you feel so inclined, feel free to submit a PR and I'd be happy to review 🙂

[imolorhe]

Hey @rohit-ravikoti any update on this issue?