fix: check for custom web elements

src/Form/FormAnalyzer.js

@@ -223,6 +223,17 @@ class FormAnalyzer {
         });
     }
 
+    /**
+     * Checks if the element is present in the cusotm elements registry and ends with a '-link' suffix
+     * @param {any} el
+     * @returns
+     */
+    isCustomWebElementLink(el) {
+        const tagName = el.nodeName.toLowerCase();
+        const isCustomElement = customElements != null && customElements.get(tagName) != null;
+        return isCustomElement && /-link$/.test(tagName) && findEnclosedShadowElements(el, 'a').length > 0;
+    }
+
     evaluateElement(el) {
         const string = getTextShallow(el);
 
@@ -262,7 +273,8 @@ class FormAnalyzer {
         if (
             (el instanceof HTMLAnchorElement && el.href && el.getAttribute('href') !== '#') ||
             (el.getAttribute('role') || '').toUpperCase() === 'LINK' ||
-            el.matches('button[class*=secondary]')
+            el.matches('button[class*=secondary]') ||
+            this.isCustomWebElementLink(el)
         ) {
             let shouldFlip = true;
             let strength = 1;

src/Scanner.js

@@ -160,7 +160,7 @@ class DefaultScanner {
                 return this;
             }
             inputs.forEach((input) => this.addInput(input));
-            if (context instanceof HTMLFormElement && this.forms.get(context)?.hasShadowTree && inputs.length === 0) {
+            if (context instanceof HTMLFormElement && this.forms.get(context)?.hasShadowTree) {
                 findEnclosedShadowElements(context, formInputsSelectorWithoutSelect).forEach((input) => {
                     if (input instanceof HTMLInputElement) {
                         this.addInput(input, context);
@@ -239,7 +239,7 @@ class DefaultScanner {
         let traversalLayerCount = 0;
         let element = input;
         // traverse the DOM to search for related inputs
-        while (traversalLayerCount <= 5 && element.parentElement !== document.documentElement) {
+        while (traversalLayerCount <= 10 && element.parentElement !== document.documentElement) {
             // Avoid overlapping containers or forms
             const siblingForm = element.parentElement?.querySelector('form');
             if (siblingForm && siblingForm !== element) {
@@ -436,12 +436,10 @@ class DefaultScanner {
         // find the enclosing parent form, and scan it.
         if (realTarget instanceof HTMLInputElement && !realTarget.hasAttribute(ATTR_INPUT_TYPE)) {
             const parentForm = this.getParentForm(realTarget);
-            if (parentForm && parentForm instanceof HTMLFormElement) {
-                const hasShadowTree = event.target?.shadowRoot != null;
-                const form = new Form(parentForm, realTarget, this.device, this.matching, this.shouldAutoprompt, hasShadowTree);
-                this.forms.set(parentForm, form);
-                this.findEligibleInputs(parentForm);
-            }
+            const hasShadowTree = event.target?.shadowRoot != null;
+            const form = new Form(parentForm, realTarget, this.device, this.matching, this.shouldAutoprompt, hasShadowTree);
+            this.forms.set(parentForm, form);
+            this.findEligibleInputs(parentForm);
         }
 
         window.performance?.mark?.('scan_shadow:init:end');

src/autofill-utils.js

@@ -567,17 +567,16 @@ function getActiveElement(root = document) {
 }
 
 /**
- * Takes a root element and tries to find visible elements first, and if it fails, it tries to find shadow elements
+ * Takes a root element and tries to find elements in shadow DOMs that match the selector 
  * @param {HTMLElement|HTMLFormElement} root
  * @param {string} selector
  * @returns {Element[]}
  */
 function findEnclosedShadowElements(root, selector) {
-    // Check if there are any shadow elements that match the selector
     const shadowElements = [];
     const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-
-    let node = walker.nextNode();
+    /** @type {Node|null} */
+    let node = walker.currentNode;
     while (node) {
         if (node instanceof HTMLElement && node.shadowRoot) {
             shadowElements.push(...node.shadowRoot.querySelectorAll(selector));