fix: detect shadow root without instanceof in fallback selectors

Author: fczbkk

scenario/shadow-dom-fallback.html

@@ -7,7 +7,7 @@
 <div>
   <template shadowrootmode="open">
     <!-- root -->
-    <div><!-- expect: :scope > :nth-child(1) --></div>
+    <div><!-- expect: :nth-child(1) --></div>
     <div></div>
   </template>
 </div>

src/selector-fallback.ts

@@ -1,4 +1,4 @@
-import { getElementParents } from "./utilities-dom.js";
+import { getElementParents, isShadowRoot } from "./utilities-dom.js";
 import { SELECTOR_SEPARATOR } from "./constants.js";
 import { CSS_SELECTOR_TYPE, CssSelector, OPERATOR } from "./types.js";
 import {
@@ -14,14 +14,14 @@ export function getElementFallbackSelector(
   root?: ParentNode,
 ): CssSelector {
   const parentElements = getElementParents(element, root).reverse();
-  const isShadowRoot = root instanceof ShadowRoot;
+  const rootIsShadowRoot = isShadowRoot(root);
 
   const elementsData = parentElements.map((element, index) => {
     const elementData = createElementData(
       element,
       [CSS_SELECTOR_TYPE.nthchild],
       // do not use child combinator for the first element in ShadowRoot
-      isShadowRoot && index === 0 ? OPERATOR.NONE : OPERATOR.CHILD,
+      rootIsShadowRoot && index === 0 ? OPERATOR.NONE : OPERATOR.CHILD,
     );
     (elementData.selectors.nthchild ?? []).forEach((selectorData) => {
       selectorData.include = true;
@@ -30,7 +30,7 @@ export function getElementFallbackSelector(
   });
 
   // Don't use :scope prefix for ShadowRoot since it doesn't work correctly
-  const prefix = isShadowRoot ? "" : root ? ":scope" : ":root";
+  const prefix = rootIsShadowRoot ? "" : root ? ":scope" : ":root";
 
   return [prefix, ...elementsData.map(constructElementSelector)].join("");
 }

src/utilities-dom.ts

@@ -61,6 +61,20 @@ export function getParents(elements: Element[], root?: ParentNode): Element[] {
   );
 }
 
+/**
+ * Uses a nodeType check instead of instanceof to work across iframe
+ * boundaries. A shadow root is the only fragment node with a host.
+ */
+export function isShadowRoot(input: unknown): input is ShadowRoot {
+  return (
+    typeof input === "object" &&
+    input !== null &&
+    "nodeType" in input &&
+    (input as Node).nodeType === Node.DOCUMENT_FRAGMENT_NODE &&
+    "host" in input
+  );
+}
+
 /**
  * Returns root node for given element. This needs to be used because of document-less environments, e.g. jsdom.
  */

test/selector-fallback.spec.ts

@@ -101,6 +101,24 @@ describe("selector - fallback", function () {
     );
   });
 
+  it("should work with a shadow root in another document", () => {
+    const iframe = document.body.appendChild(document.createElement("iframe"));
+    const iframeDoc = iframe.contentDocument;
+    const host = iframeDoc.body.appendChild(iframeDoc.createElement("div"));
+    const shadowRoot = host.attachShadow({ mode: "open" });
+    const targetElement = shadowRoot.appendChild(
+      iframeDoc.createElement("div"),
+    );
+    shadowRoot.appendChild(iframeDoc.createElement("div"));
+
+    const result = getFallbackSelector([targetElement], shadowRoot);
+
+    assert.equal(result, ":nth-child(1)");
+    assert.deepEqual([...shadowRoot.querySelectorAll(result)], [targetElement]);
+
+    iframe.remove();
+  });
+
   it("should work with elements in iframe", () => {
     const iframe = document.createElement("iframe");
     iframe.style.display = "none";