Feature: Use in webcomponent

[peter-mogensen]

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.

[timmywil]

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.

[peter-mogensen]

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()

[Flurb]

Hi @timmywil ,
I was wondering why this issue is closed.
It still cannot be used with shadow ROM right?

[timmywil]

Yes, thanks. I don't know why I didn't reopen. It should be easy enough to fix...I think.

[Flurb]

Yes, thanks. I don't know why I didn't reopen. It should be easy enough to fix...I think.

Great! Thanks @timmywil !

[Flurb]

Just a small question:
Why is there a hard check for doc.nodeType === 9?
The type of Node can also be an Element right?

[timmywil]

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.

[yonisabdillahi]

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

[a-r-w]

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.

[a-r-w]

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

[vtron]

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.

[breakthestatic]

Hey @timmywil, will you be able to take a look at my PR (#618)?