feat: support attached shadow dom elements (#618)

Original implementation did not properly handle nested shadow dom elements.

Updated the traversal to manually step through the dom to ensure that all
shadow dom ancestors are properly handled.

Author: breakthestatic

src/isAttached.ts

@@ -2,14 +2,14 @@
  * Determine if an element is attached to the DOM
  * Panzoom requires this so events work properly
  */
-export default function isAttached(elem: HTMLElement | SVGElement | Document) {
-  const doc = elem.ownerDocument
-  const parent = elem.parentNode
-  return (
-    doc &&
-    parent &&
-    doc.nodeType === 9 &&
-    parent.nodeType === 1 &&
-    doc.documentElement.contains(parent)
-  )
+export default function isAttached(node: Node) {
+  let currentNode = node
+  while (currentNode && currentNode.parentNode) {
+    if (currentNode.parentNode === document) return true
+    currentNode =
+      currentNode.parentNode instanceof ShadowRoot
+        ? currentNode.parentNode.host
+        : currentNode.parentNode
+  }
+  return false
 }

test/unit/isAttached.test.ts

@@ -8,6 +8,30 @@ describe('isAttached', () => {
     assert(isAttached(div))
     document.body.removeChild(div)
   })
+  it('determines if an attached shadow dom element is attached', () => {
+    const div = document.createElement('div')
+    const shadowChild = document.createElement('div')
+    div.attachShadow({ mode: 'open' }).appendChild(shadowChild)
+    document.body.appendChild(div)
+    assert(isAttached(shadowChild))
+    document.body.removeChild(div)
+  })
+  it('determines if a nested, attached shadow dom element is attached', () => {
+    const div = document.createElement('div')
+    const shadowChild = document.createElement('div')
+    const shadowGrandChild = document.createElement('div')
+    shadowChild.attachShadow({ mode: 'open' }).appendChild(shadowGrandChild)
+    div.attachShadow({ mode: 'open' }).appendChild(shadowChild)
+    document.body.appendChild(div)
+    assert(isAttached(shadowGrandChild))
+    document.body.removeChild(div)
+  })
+  it('determines if a detached shadow dom element is attached', () => {
+    const div = document.createElement('div')
+    const shadowChild = document.createElement('div')
+    div.attachShadow({ mode: 'open' }).appendChild(shadowChild)
+    assert(!isAttached(shadowChild))
+  })
   it('determines if a detached element is attached', () => {
     const div = document.createElement('div')
     assert(!isAttached(div))