Open peter-mogensen opened 3 years ago
Thanks for opening an issue. If you could put together a small example from codepen.io or jsbin.com, that would be very helpful. Don't worry that I'm closing for now. This can still be put into feature pipeline if valid.
I think it's most simply stated that:
If elem
is beneath a shadowRoot node in the DOM, then
elem.ownerDocument.documentElement.contains(elem.parentNode);
returns false, and PanZoom refuse to work with it due the the test in isAttached()
Hi @timmywil , I was wondering why this issue is closed. It still cannot be used with shadow ROM right?
Yes, thanks. I don't know why I didn't reopen. It should be easy enough to fix...I think.
Yes, thanks. I don't know why I didn't reopen. It should be easy enough to fix...I think.
Great! Thanks @timmywil !
Just a small question:
Why is there a hard check for doc.nodeType === 9
?
The type of Node can also be an Element right?
The element can be, but it's attached to a document, which has a nodeType of 9. In the case of shadow DOM, we just need to allow that the owner document can be retrieved from the host
property of a document fragment.
Hi @timmywil,
Great library, I am trying to use the library with Lit Element. Any update on whether shadow dom will be supported. Running into the exact same issue as @Flurb was.
It's a matter of determining if the element being passed in is within a shadow dom.
const isInShadowDom = node.getRootNode() instanceof ShadowRoot
In the meantime there's a possible workaround if you're ok using web components without the shadow dom. For Lit, that's done with:
createRenderRoot() { return this; }
See https://lit.dev/docs/components/shadow-dom/#renderroot
Note that you'll have to live without such nice features as scoped css.
@timmywil here's a simple case in jsfiddle that triggers the "Panzoom should be called on elements that have been attached to the DOM" error: https://jsfiddle.net/a_r_w/a2m46sLf/53/. It also demonstrates the workaround from the comment above.
Any updates on this/can this PR be integrated? This is a really awesome lib but as a user of LitElement I am completely blocked until this update is added.
Hey @timmywil, will you be able to take a look at my PR (#618)?
What problem does this feature solve?
I tried use create a small webcomponent which panzoom'ed an SVG map within a smaller "viewport". (based on lit-element)
The Panzoom() function returns an error, failing on the test that the panzoom element is not attached to the document - which I suppose is because of the intervening shadow DOM root.