fix: generate valid selectors for children of shadow DOM

Author: fczbkk

src/index.ts

@@ -58,7 +58,11 @@ export function* cssSelectorGenerator(
     }
   }
 
-  yield getFallbackSelector(elements, options.useScope ? root : undefined);
+  const rootWasProvided = custom_options.root !== undefined;
+  yield getFallbackSelector(
+    elements,
+    options.useScope || rootWasProvided ? root : undefined,
+  );
 }
 
 export default getCssSelector;

src/selector-fallback.ts

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

src/utilities-dom.ts

@@ -43,10 +43,12 @@ export function getElementParents(
 ): Element[] {
   root = root ?? getRootNode(element);
   const result = [];
-  let parent: Element | null = element;
-  while (isElement(parent) && parent !== root) {
-    result.push(parent);
-    parent = parent.parentElement;
+  let parent: Node | null = element;
+  while (parent && parent !== root) {
+    if (isElement(parent)) {
+      result.push(parent);
+    }
+    parent = parent.parentNode;
   }
   return result;
 }