@asamuzakjp/dom-selector 1.2.2 → 1.2.4

package/src/js/matcher.js

@@ -18,7 +18,7 @@ import {
   DOCUMENT_FRAGMENT_NODE, DOCUMENT_NODE, ELEMENT_NODE, NOT_SUPPORTED_ERR,
   REG_LOGICAL_PSEUDO, REG_SHADOW_HOST, SELECTOR_ATTR, SELECTOR_CLASS,
   SELECTOR_ID, SELECTOR_PSEUDO_CLASS, SELECTOR_PSEUDO_ELEMENT, SELECTOR_TYPE,
-  SHOW_ELEMENT, SYNTAX_ERR, TEXT_NODE
+  SHOW_DOCUMENT, SHOW_DOCUMENT_FRAGMENT, SHOW_ELEMENT, SYNTAX_ERR, TEXT_NODE
 } from './constant.js';
 const FIND_NEXT = 'next';
 const FIND_PREV = 'prev';
@@ -62,10 +62,13 @@ export class Matcher {
   #ast;
   #bit;
   #cache;
+  #document;
   #node;
   #nodes;
   #root;
-  #selector;
+  #shadow;
+  #subtree;
+  #tree;
   #warn;
 
   /**
@@ -86,11 +89,11 @@ export class Matcher {
       [SELECTOR_PSEUDO_CLASS, BIT_32]
     ]);
     this.#cache = new WeakMap();
-    this.#selector = selector;
+    [this.#ast, this.#nodes] = this._prepare(selector);
     this.#node = node;
+    [this.#document, this.#root, this.#tree] = this._setup(node);
+    this.#shadow = isInShadowTree(node);
     this.#warn = !!warn;
-    [this.#ast, this.#nodes] = this._prepare(selector);
-    this.#root = this._getRoot(node);
   }
 
   /**
@@ -110,11 +113,11 @@ export class Matcher {
   }
 
   /**
-   * get root
+   * set up document, root, walker
    * @param {object} node - Document, DocumentFragment, Element node
-   * @returns {object} - root object
+   * @returns {Array.<object>} - document, root, walker
    */
-  _getRoot(node = this.#node) {
+  _setup(node) {
     let document;
     let root;
     switch (node.nodeType) {
@@ -150,12 +153,13 @@ export class Matcher {
         throw new TypeError(`Unexpected node ${node.nodeName}`);
       }
     }
-    const shadow = isInShadowTree(node);
-    return {
+    const filter = SHOW_DOCUMENT | SHOW_DOCUMENT_FRAGMENT | SHOW_ELEMENT;
+    const walker = document.createTreeWalker(root, filter);
+    return [
       document,
       root,
-      shadow
-    };
+      walker
+    ];
   }
 
   /**
@@ -190,7 +194,7 @@ export class Matcher {
    * @param {string} selector - CSS selector
    * @returns {Array.<Array.<object|undefined>>} - array of ast and nodes
    */
-  _prepare(selector = this.#selector) {
+  _prepare(selector) {
     const ast = parseSelector(selector);
     const branches = walkAST(ast);
     const tree = [];
@@ -243,6 +247,42 @@ export class Matcher {
     ];
   }
 
+  /**
+   * traverse tree walker
+   * @param {object} [node] - Element node
+   * @param {object} [tree] - tree walker
+   * @returns {?object} - node
+   */
+  _traverse(node = {}, tree = this.#tree) {
+    let current;
+    let refNode = tree.currentNode;
+    if (node.nodeType === ELEMENT_NODE && refNode === node) {
+      current = refNode;
+    } else {
+      if (refNode !== tree.root) {
+        while (refNode) {
+          if (refNode === tree.root ||
+              (node.nodeType === ELEMENT_NODE && refNode === node)) {
+            break;
+          }
+          refNode = tree.parentNode();
+        }
+      }
+      if (node.nodeType === ELEMENT_NODE) {
+        while (refNode) {
+          if (refNode === node) {
+            current = refNode;
+            break;
+          }
+          refNode = tree.nextNode();
+        }
+      } else {
+        current = refNode;
+      }
+    }
+    return current ?? null;
+  }
+
   /**
    * collect nth child
    * @param {object} anb - An+B options
@@ -267,16 +307,15 @@ export class Matcher {
       }
     }
     if (parentNode) {
-      const arr = [].slice.call(parentNode.children);
+      const arr = [].slice.call(parentNode.childNodes)
+        .filter(n => n.nodeType === ELEMENT_NODE);
       const l = arr.length;
       if (l) {
         const selectorNodes = new Set();
         if (selectorBranches) {
-          const branchesLen = selectorBranches.length;
           for (const refNode of arr) {
             let bool;
-            for (let i = 0; i < branchesLen; i++) {
-              const leaves = selectorBranches[i];
+            for (const leaves of selectorBranches) {
               bool = this._matchLeaves(leaves, refNode);
               if (!bool) {
                 break;
@@ -294,8 +333,7 @@ export class Matcher {
         if (a === 0) {
           if (b > 0 && b <= l) {
             if (selectorNodes.size) {
-              for (let i = 0; i < l; i++) {
-                const current = arr[i];
+              for (const current of arr) {
                 if (selectorNodes.has(current)) {
                   matched.add(current);
                   break;
@@ -341,13 +379,11 @@ export class Matcher {
         }
       }
     } else {
-      const { root } = this.#root;
-      if (node === root && root.nodeType === ELEMENT_NODE && (a + b) === 1) {
+      if (node === this.#root && this.#root.nodeType === ELEMENT_NODE &&
+          (a + b) === 1) {
         if (selectorBranches) {
-          const branchesLen = selectorBranches.length;
           let bool;
-          for (let i = 0; i < branchesLen; i++) {
-            const leaves = selectorBranches[i];
+          for (const leaves of selectorBranches) {
             bool = this._matchLeaves(leaves, node);
             if (bool) {
               break;
@@ -378,7 +414,8 @@ export class Matcher {
     const { localName, parentNode, prefix } = node;
     const matched = new Set();
     if (parentNode) {
-      const arr = [].slice.call(parentNode.children);
+      const arr = [].slice.call(parentNode.childNodes)
+        .filter(n => n.nodeType === ELEMENT_NODE);
       const l = arr.length;
       if (l) {
         if (reverse) {
@@ -388,8 +425,7 @@ export class Matcher {
         if (a === 0) {
           if (b > 0 && b <= l) {
             let j = 0;
-            for (let i = 0; i < l; i++) {
-              const current = arr[i];
+            for (const current of arr) {
               const { localName: itemLocalName, prefix: itemPrefix } = current;
               if (itemLocalName === localName && itemPrefix === prefix) {
                 if (j === b - 1) {
@@ -410,8 +446,7 @@ export class Matcher {
           }
           if (nth >= 0 && nth < l) {
             let j = a > 0 ? 0 : b - 1;
-            for (let i = 0; i < l; i++) {
-              const current = arr[i];
+            for (const current of arr) {
               const { localName: itemLocalName, prefix: itemPrefix } = current;
               if (itemLocalName === localName && itemPrefix === prefix) {
                 if (j === nth) {
@@ -431,8 +466,8 @@ export class Matcher {
         }
       }
     } else {
-      const { root } = this.#root;
-      if (node === root && root.nodeType === ELEMENT_NODE && (a + b) === 1) {
+      if (node === this.#root && this.#root.nodeType === ELEMENT_NODE &&
+          (a + b) === 1) {
         matched.add(node);
       }
     }
@@ -900,7 +935,6 @@ export class Matcher {
         }
       }
     } else {
-      const { document, root } = this.#root;
       const regAnchor = /^a(?:rea)?$/;
       const regFormCtrl =
         /^(?:(?:fieldse|inpu|selec)t|button|opt(?:group|ion)|textarea)$/;
@@ -921,7 +955,7 @@ export class Matcher {
         }
         case 'local-link': {
           if (regAnchor.test(localName) && node.hasAttribute('href')) {
-            const { href, origin, pathname } = new URL(document.URL);
+            const { href, origin, pathname } = new URL(this.#document.URL);
             const attrURL = new URL(node.getAttribute('href'), href);
             if (attrURL.origin === origin && attrURL.pathname === pathname) {
               matched.add(node);
@@ -934,17 +968,18 @@ export class Matcher {
           break;
         }
         case 'target': {
-          const { hash } = new URL(document.URL);
-          if (node.id && hash === `#${node.id}` && document.contains(node)) {
+          const { hash } = new URL(this.#document.URL);
+          if (node.id && hash === `#${node.id}` &&
+              this.#document.contains(node)) {
             matched.add(node);
           }
           break;
         }
         case 'target-within': {
-          const { hash } = new URL(document.URL);
+          const { hash } = new URL(this.#document.URL);
           if (hash) {
             const id = hash.replace(/^#/, '');
-            let current = document.getElementById(id);
+            let current = this.#document.getElementById(id);
             while (current) {
               if (current === node) {
                 matched.add(node);
@@ -960,19 +995,19 @@ export class Matcher {
             if (node === this.#node) {
               matched.add(node);
             }
-          } else if (node === document.documentElement) {
+          } else if (node === this.#document.documentElement) {
             matched.add(node);
           }
           break;
         }
         case 'focus': {
-          if (node === document.activeElement) {
+          if (node === this.#document.activeElement) {
             matched.add(node);
           }
           break;
         }
         case 'focus-within': {
-          let current = document.activeElement;
+          let current = this.#document.activeElement;
           while (current) {
             if (current === node) {
               matched.add(node);
@@ -1118,7 +1153,7 @@ export class Matcher {
               parent = parent.parentNode;
             }
             if (!parent) {
-              parent = document.documentElement;
+              parent = this.#document.documentElement;
             }
             const nodes = [].slice.call(parent.getElementsByTagName('input'));
             let checked;
@@ -1159,7 +1194,8 @@ export class Matcher {
               form = form.parentNode;
             }
             if (form) {
-              const iterator = document.createNodeIterator(form, SHOW_ELEMENT);
+              const iterator =
+                this.#document.createNodeIterator(form, SHOW_ELEMENT);
               let nextNode = iterator.nextNode();
               while (nextNode) {
                 const nodeName = nextNode.localName;
@@ -1231,10 +1267,9 @@ export class Matcher {
               matched.add(node);
             }
           } else if (localName === 'fieldset') {
-            const iterator = document.createNodeIterator(node, SHOW_ELEMENT);
-            let refNode = iterator.nextNode();
+            let refNode = this._traverse(node);
             if (refNode === node) {
-              refNode = iterator.nextNode();
+              refNode = this.#tree.nextNode();
             }
             let bool;
             while (refNode) {
@@ -1244,7 +1279,7 @@ export class Matcher {
                   break;
                 }
               }
-              refNode = iterator.nextNode();
+              refNode = this.#tree.nextNode();
             }
             if (bool) {
               matched.add(node);
@@ -1258,10 +1293,9 @@ export class Matcher {
               matched.add(node);
             }
           } else if (localName === 'fieldset') {
-            const iterator = document.createNodeIterator(node, SHOW_ELEMENT);
-            let refNode = iterator.nextNode();
+            let refNode = this._traverse(node);
             if (refNode === node) {
-              refNode = iterator.nextNode();
+              refNode = this.#tree.nextNode();
             }
             let bool;
             while (refNode) {
@@ -1271,7 +1305,7 @@ export class Matcher {
                   break;
                 }
               }
-              refNode = iterator.nextNode();
+              refNode = this.#tree.nextNode();
             }
             if (!bool) {
               matched.add(node);
@@ -1347,7 +1381,7 @@ export class Matcher {
           break;
         }
         case 'root': {
-          if (node === document.documentElement) {
+          if (node === this.#document.documentElement) {
             matched.add(node);
           }
           break;
@@ -1373,14 +1407,14 @@ export class Matcher {
         }
         case 'first-child': {
           if ((parentNode && node === parentNode.firstElementChild) ||
-              (node === root && root.nodeType === ELEMENT_NODE)) {
+              (node === this.#root && this.#root.nodeType === ELEMENT_NODE)) {
             matched.add(node);
           }
           break;
         }
         case 'last-child': {
           if ((parentNode && node === parentNode.lastElementChild) ||
-              (node === root && root.nodeType === ELEMENT_NODE)) {
+              (node === this.#root && this.#root.nodeType === ELEMENT_NODE)) {
             matched.add(node);
           }
           break;
@@ -1389,7 +1423,7 @@ export class Matcher {
           if ((parentNode &&
                node === parentNode.firstElementChild &&
                node === parentNode.lastElementChild) ||
-              (node === root && root.nodeType === ELEMENT_NODE)) {
+              (node === this.#root && this.#root.nodeType === ELEMENT_NODE)) {
             matched.add(node);
           }
           break;
@@ -1403,7 +1437,8 @@ export class Matcher {
             if (node1) {
               matched.add(node1);
             }
-          } else if (node === root && root.nodeType === ELEMENT_NODE) {
+          } else if (node === this.#root &&
+                     this.#root.nodeType === ELEMENT_NODE) {
             matched.add(node);
           }
           break;
@@ -1418,7 +1453,8 @@ export class Matcher {
             if (node1) {
               matched.add(node1);
             }
-          } else if (node === root && root.nodeType === ELEMENT_NODE) {
+          } else if (node === this.#root &&
+                     this.#root.nodeType === ELEMENT_NODE) {
             matched.add(node);
           }
           break;
@@ -1439,7 +1475,8 @@ export class Matcher {
                 matched.add(node);
               }
             }
-          } else if (node === root && root.nodeType === ELEMENT_NODE) {
+          } else if (node === this.#root &&
+                     this.#root.nodeType === ELEMENT_NODE) {
             matched.add(node);
           }
           break;
@@ -1520,9 +1557,8 @@ export class Matcher {
     const { attributes } = node;
     let res;
     if (attributes && attributes.length) {
-      const { document } = this.#root;
       let caseInsensitive;
-      if (document.contentType === 'text/html') {
+      if (this.#document.contentType === 'text/html') {
         if (typeof astFlags === 'string' && /^s$/i.test(astFlags)) {
           caseInsensitive = false;
         } else {
@@ -1748,11 +1784,10 @@ export class Matcher {
     const astName = unescapeSelector(ast.name);
     const { localName, prefix } = node;
     const { forgive } = opt;
-    const { document } = this.#root;
     let {
       prefix: astPrefix, tagName: astNodeName
     } = selectorToNodeProps(astName, node);
-    if (document.contentType === 'text/html') {
+    if (this.#document.contentType === 'text/html') {
       astPrefix = astPrefix.toLowerCase();
       astNodeName = astNodeName.toLowerCase();
     }
@@ -1862,7 +1897,6 @@ export class Matcher {
   _matchSelector(ast, node, opt) {
     const { type: astType } = ast;
     const astName = unescapeSelector(ast.name);
-    const { shadow } = this.#root;
     let matched = new Set();
     if (node.nodeType === ELEMENT_NODE) {
       switch (astType) {
@@ -1906,7 +1940,7 @@ export class Matcher {
           }
         }
       }
-    } else if (shadow && astType === SELECTOR_PSEUDO_CLASS &&
+    } else if (this.#shadow && astType === SELECTOR_PSEUDO_CLASS &&
                node.nodeType === DOCUMENT_FRAGMENT_NODE) {
       if (astName !== 'has' && REG_LOGICAL_PSEUDO.test(astName)) {
         const nodes = this._matchPseudoClassSelector(ast, node, opt);
@@ -1952,18 +1986,17 @@ export class Matcher {
     const { type: leafType } = leaf;
     const leafName = unescapeSelector(leaf.name);
     const matchItems = items.length > 0;
-    const { document, root, shadow } = this.#root;
     let nodes = new Set();
     let pending = false;
-    if (shadow) {
+    if (this.#shadow) {
       pending = true;
     } else {
       switch (leafType) {
         case SELECTOR_ID: {
-          if (root.nodeType === ELEMENT_NODE) {
+          if (this.#root.nodeType === ELEMENT_NODE) {
             pending = true;
           } else {
-            const node = root.getElementById(leafName);
+            const node = this.#root.getElementById(leafName);
             if (node && node !== baseNode && baseNode.contains(node)) {
               if (matchItems) {
                 const bool = this._matchLeaves(items, node);
@@ -1994,7 +2027,8 @@ export class Matcher {
           break;
         }
         case SELECTOR_TYPE: {
-          if (document.contentType === 'text/html' && !/[*|]/.test(leafName)) {
+          if (this.#document.contentType === 'text/html' &&
+              !/[*|]/.test(leafName)) {
             const arr = [].slice.call(baseNode.getElementsByTagName(leafName));
             if (arr.length) {
               if (matchItems) {
@@ -2066,11 +2100,13 @@ export class Matcher {
           break;
         }
         case '>': {
-          const childNodes = [].slice.call(node.children);
+          const childNodes = node.childNodes.values();
           for (const refNode of childNodes) {
-            const bool = this._matchLeaves(leaves, refNode, { forgive });
-            if (bool) {
-              matched.add(refNode);
+            if (refNode.nodeType === ELEMENT_NODE) {
+              const bool = this._matchLeaves(leaves, refNode, { forgive });
+              if (bool) {
+                matched.add(refNode);
+              }
             }
           }
           break;
@@ -2081,18 +2117,16 @@ export class Matcher {
           if (nodes.size) {
             matched = nodes;
           } else if (pending) {
-            const { document } = this.#root;
-            const iterator = document.createNodeIterator(node, SHOW_ELEMENT);
-            let refNode = iterator.nextNode();
+            let refNode = this._traverse(node);
             if (refNode === node) {
-              refNode = iterator.nextNode();
+              refNode = this.#tree.nextNode();
             }
             while (refNode) {
               const bool = this._matchLeaves(leaves, refNode, { forgive });
               if (bool) {
                 matched.add(refNode);
               }
-              refNode = iterator.nextNode();
+              refNode = this.#tree.nextNode();
             }
           }
         }
@@ -2155,42 +2189,92 @@ export class Matcher {
   }
 
   /**
-   * find nodes
+   * find matched node from tree walker
+   * @param {Array.<object>} leaves - AST leaves
+   * @param {object} [opt] - options
+   * @param {object} [opt.node] - node to start from
+   * @param {string} [opt.targetType] - target type
+   * @param {object} [opt.tree] - tree walker
+   * @returns {?object} - matched node
+   */
+  _findNode(leaves, opt = {}) {
+    let { node, targetType, tree } = opt;
+    if (!tree) {
+      tree = this.#tree;
+    }
+    let refNode = this._traverse(node);
+    if (refNode.nodeType !== ELEMENT_NODE || refNode === node) {
+      refNode = tree.nextNode();
+    }
+    let matchedNode;
+    while (refNode) {
+      let bool;
+      if (this.#node.nodeType === ELEMENT_NODE) {
+        if (refNode === this.#node) {
+          bool = true;
+        } else {
+          bool = this.#node.contains(refNode);
+        }
+      } else {
+        bool = true;
+      }
+      if (bool) {
+        const matched = this._matchLeaves(leaves, refNode);
+        if (matched) {
+          matchedNode = refNode;
+          break;
+        }
+      }
+      if (targetType === TARGET_LINEAL) {
+        refNode = tree.parentNode();
+      } else {
+        refNode = tree.nextNode();
+      }
+    }
+    return matchedNode ?? null;
+  }
+
+  /**
+   * find entry nodes
    * @param {object} twig - twig
    * @param {string} targetType - target type
    * @returns {object} - collection of nodes etc.
    */
-  _findNodes(twig, targetType) {
-    const { leaves: [leaf, ...items] } = twig;
+  _findEntryNodes(twig, targetType) {
+    const { leaves } = twig;
+    const [leaf, ...filterLeaves] = leaves;
     const { type: leafType } = leaf;
     const leafName = unescapeSelector(leaf.name);
-    const { document, root, shadow } = this.#root;
+    const compound = filterLeaves.length > 0;
     let nodes = new Set();
+    let filtered = false;
     let pending = false;
     switch (leafType) {
       case SELECTOR_ID: {
         if (targetType === TARGET_SELF) {
-          const bool = this._matchLeaves([leaf], this.#node);
+          const bool = this._matchLeaves(leaves, this.#node);
           if (bool) {
             nodes.add(this.#node);
+            filtered = true;
           }
         } else if (targetType === TARGET_LINEAL) {
           let refNode = this.#node;
           while (refNode) {
-            const bool = this._matchLeaves([leaf], refNode);
+            const bool = this._matchLeaves(leaves, refNode);
             if (bool) {
               nodes.add(refNode);
-              break;
+              filtered = true;
             }
             refNode = refNode.parentNode;
           }
         } else if (targetType === TARGET_ALL ||
-                   root.nodeType === ELEMENT_NODE) {
+                   this.#root.nodeType === ELEMENT_NODE) {
           pending = true;
         } else {
-          const node = root.getElementById(leafName);
+          const node = this.#root.getElementById(leafName);
           if (node) {
             nodes.add(node);
+            filtered = true;
           }
         }
         break;
@@ -2213,21 +2297,35 @@ export class Matcher {
               break;
             }
           }
-        } else if (root.nodeType === DOCUMENT_FRAGMENT_NODE) {
-          const childNodes = [].slice.call(root.children);
+        } else if (targetType === TARGET_FIRST) {
+          const node = this._findNode(leaves, {
+            node: this.#node,
+            targetType,
+            tree: this.#subtree
+          });
+          if (node) {
+            nodes.add(node);
+            filtered = true;
+            break;
+          }
+        } else if (this.#root.nodeType === DOCUMENT_FRAGMENT_NODE) {
+          const childNodes = this.#root.childNodes.values();
           const arr = [];
           for (const node of childNodes) {
-            if (node.classList.contains(leafName)) {
-              arr.push(node);
+            if (node.nodeType === ELEMENT_NODE) {
+              if (node.classList.contains(leafName)) {
+                arr.push(node);
+              }
+              const a = [].slice.call(node.getElementsByClassName(leafName));
+              arr.push(...a);
             }
-            const a = [].slice.call(node.getElementsByClassName(leafName));
-            arr.push(...a);
           }
           if (arr.length) {
             nodes = new Set(arr);
           }
         } else {
-          const arr = [].slice.call(root.getElementsByClassName(leafName));
+          const arr =
+            [].slice.call(this.#root.getElementsByClassName(leafName));
           if (this.#node.nodeType === ELEMENT_NODE) {
             for (const node of arr) {
               if (node === this.#node || isInclusive(node, this.#node)) {
@@ -2243,43 +2341,58 @@ export class Matcher {
       case SELECTOR_TYPE: {
         if (targetType === TARGET_SELF) {
           if (this.#node.nodeType === ELEMENT_NODE) {
-            const bool = this._matchLeaves([leaf], this.#node);
+            const bool = this._matchLeaves(leaves, this.#node);
             if (bool) {
               nodes.add(this.#node);
+              filtered = true;
             }
           }
         } else if (targetType === TARGET_LINEAL) {
           let refNode = this.#node;
           while (refNode) {
             if (refNode.nodeType === ELEMENT_NODE) {
-              const bool = this._matchLeaves([leaf], refNode);
+              const bool = this._matchLeaves(leaves, refNode);
               if (bool) {
                 nodes.add(refNode);
+                filtered = true;
               }
               refNode = refNode.parentNode;
             } else {
               break;
             }
           }
-        } else if (document.contentType !== 'text/html' ||
+        } else if (targetType === TARGET_FIRST) {
+          const node = this._findNode(leaves, {
+            node: this.#node,
+            targetType,
+            tree: this.#subtree
+          });
+          if (node) {
+            nodes.add(node);
+            filtered = true;
+            break;
+          }
+        } else if (this.#document.contentType !== 'text/html' ||
                    /[*|]/.test(leafName)) {
           pending = true;
-        } else if (root.nodeType === DOCUMENT_FRAGMENT_NODE) {
+        } else if (this.#root.nodeType === DOCUMENT_FRAGMENT_NODE) {
           const tagName = leafName.toLowerCase();
-          const childNodes = [].slice.call(root.children);
+          const childNodes = this.#root.childNodes.values();
           const arr = [];
           for (const node of childNodes) {
-            if (node.localName === tagName) {
-              arr.push(node);
+            if (node.nodeType === ELEMENT_NODE) {
+              if (node.localName === tagName) {
+                arr.push(node);
+              }
+              const a = [].slice.call(node.getElementsByTagName(leafName));
+              arr.push(...a);
             }
-            const a = [].slice.call(node.getElementsByTagName(leafName));
-            arr.push(...a);
           }
           if (arr.length) {
             nodes = new Set(arr);
           }
         } else {
-          const arr = [].slice.call(root.getElementsByTagName(leafName));
+          const arr = [].slice.call(this.#root.getElementsByTagName(leafName));
           if (this.#node.nodeType === ELEMENT_NODE) {
             for (const node of arr) {
               if (node === this.#node || isInclusive(node, this.#node)) {
@@ -2299,49 +2412,62 @@ export class Matcher {
       }
       default: {
         if (targetType !== TARGET_LINEAL && REG_SHADOW_HOST.test(leafName)) {
-          if (shadow && this.#node.nodeType === DOCUMENT_FRAGMENT_NODE) {
+          if (this.#shadow && this.#node.nodeType === DOCUMENT_FRAGMENT_NODE) {
             const node = this._matchShadowHostPseudoClass(leaf, this.#node);
             if (node) {
               nodes.add(node);
             }
           }
         } else if (targetType === TARGET_SELF) {
-          const bool = this._matchLeaves([leaf], this.#node);
+          const bool = this._matchLeaves(leaves, this.#node);
           if (bool) {
             nodes.add(this.#node);
+            filtered = true;
           }
         } else if (targetType === TARGET_LINEAL) {
           let refNode = this.#node;
           while (refNode) {
-            const bool = this._matchLeaves([leaf], refNode);
+            const bool = this._matchLeaves(leaves, refNode);
             if (bool) {
               nodes.add(refNode);
+              filtered = true;
             }
             refNode = refNode.parentNode;
           }
+        } else if (targetType === TARGET_FIRST) {
+          const node = this._findNode(leaves, {
+            node: this.#node,
+            targetType,
+            tree: this.#subtree
+          });
+          if (node) {
+            nodes.add(node);
+            filtered = true;
+            break;
+          }
         } else {
           pending = true;
         }
       }
     }
-    const itemsLen = items.length;
     // check last leaf if node not found, not pending and leaves left
-    if (!nodes.size && !pending && itemsLen) {
-      const lastLeaf = items[itemsLen - 1];
+    if (!nodes.size && !pending && compound) {
+      const lastLeaf = filterLeaves[filterLeaves.length - 1];
       const { type: lastLeafType } = lastLeaf;
       if (lastLeafType === SELECTOR_PSEUDO_CLASS) {
         let node;
-        if (root.nodeType === ELEMENT_NODE) {
-          node = root;
+        if (this.#root.nodeType === ELEMENT_NODE) {
+          node = this.#root;
         } else {
-          node = root.firstElementChild;
+          node = this.#root.firstElementChild;
         }
         // throws if unknown pseudo-class
         this._matchPseudoClassSelector(lastLeaf, node);
       }
     }
     return {
-      compound: itemsLen > 0,
+      compound,
+      filtered,
       nodes,
       pending
     };
@@ -2355,32 +2481,54 @@ export class Matcher {
    */
   _getEntryTwig(branch, targetType) {
     const branchLen = branch.length;
+    const complex = branchLen > 1;
     const firstTwig = branch[0];
     let find;
     let twig;
-    if (branchLen > 1) {
+    if (complex) {
       const { leaves: [{ type: firstType }] } = firstTwig;
       const lastTwig = branch[branchLen - 1];
       const { leaves: [{ type: lastType }] } = lastTwig;
-      if (lastType === SELECTOR_PSEUDO_ELEMENT || lastType === SELECTOR_ID) {
+      if (lastType === SELECTOR_PSEUDO_ELEMENT ||
+                 lastType === SELECTOR_ID) {
         find = FIND_PREV;
         twig = lastTwig;
       } else if (firstType === SELECTOR_PSEUDO_ELEMENT ||
-                 firstType === SELECTOR_ID) {
+                 firstType === SELECTOR_ID ||
+                 targetType === TARGET_ALL) {
         find = FIND_NEXT;
         twig = firstTwig;
-      } else if (targetType === TARGET_FIRST && branchLen < BIT_04) {
-        find = FIND_PREV;
-        twig = lastTwig;
       } else {
-        find = FIND_NEXT;
-        twig = firstTwig;
+        let bool;
+        for (const { combo, leaves: [leaf] } of branch) {
+          const { type: leafType } = leaf;
+          const leafName = unescapeSelector(leaf.name);
+          if (leafType === SELECTOR_PSEUDO_CLASS && leafName === 'dir') {
+            bool = false;
+            break;
+          }
+          if (combo) {
+            const { name: comboName } = combo;
+            if (/^[+~]$/.test(comboName)) {
+              bool = true;
+              break;
+            }
+          }
+        }
+        if (bool) {
+          find = FIND_NEXT;
+          twig = firstTwig;
+        } else {
+          find = FIND_PREV;
+          twig = lastTwig;
+        }
       }
     } else {
       find = FIND_PREV;
       twig = firstTwig;
     }
     return {
+      complex,
       find,
       twig
     };
@@ -2394,11 +2542,21 @@ export class Matcher {
   _collectNodes(targetType) {
     const ast = this.#ast.values();
     if (targetType === TARGET_ALL || targetType === TARGET_FIRST) {
+      if (targetType === TARGET_FIRST) {
+        if (this.#node.nodeType === ELEMENT_NODE) {
+          this.#subtree =
+            this.#document.createTreeWalker(this.#node, SHOW_ELEMENT);
+        } else {
+          this.#subtree = this.#tree;
+        }
+      }
       const pendingItems = new Set();
       let i = 0;
       for (const { branch } of ast) {
         const { find, twig } = this._getEntryTwig(branch, targetType);
-        const { compound, nodes, pending } = this._findNodes(twig, targetType);
+        const {
+          compound, filtered, nodes, pending
+        } = this._findEntryNodes(twig, targetType);
         if (nodes.size) {
           this.#nodes[i] = nodes;
         } else if (pending) {
@@ -2409,14 +2567,12 @@ export class Matcher {
         } else {
           this.#ast[i].skip = true;
         }
-        this.#ast[i].filtered = !compound;
+        this.#ast[i].filtered = filtered || !compound;
         this.#ast[i].find = find;
         i++;
       }
       if (pendingItems.size) {
-        const { document, root } = this.#root;
-        const iterator = document.createNodeIterator(root, SHOW_ELEMENT);
-        let nextNode = iterator.nextNode();
+        let nextNode = this._traverse();
         while (nextNode) {
           let bool = false;
           if (this.#node.nodeType === ELEMENT_NODE) {
@@ -2435,26 +2591,26 @@ export class Matcher {
               if (matched) {
                 const index = pendingItem.get('index');
                 this.#nodes[index].add(nextNode);
-                if (!this.#ast[index].filtered) {
-                  this.#ast[index].filtered = true;
-                }
+                this.#ast[index].filtered = true;
               }
             }
           }
-          nextNode = iterator.nextNode();
+          nextNode = this.#tree.nextNode();
         }
       }
     } else {
       let i = 0;
       for (const { branch } of ast) {
         const twig = branch[branch.length - 1];
-        const { compound, nodes } = this._findNodes(twig, targetType);
+        const {
+          compound, filtered, nodes
+        } = this._findEntryNodes(twig, targetType);
         if (nodes.size) {
           this.#nodes[i] = nodes;
         } else {
           this.#ast[i].skip = true;
         }
-        this.#ast[i].filtered = !compound;
+        this.#ast[i].filtered = filtered || !compound;
         this.#ast[i].find = FIND_PREV;
         i++;
       }
@@ -2501,13 +2657,13 @@ export class Matcher {
       if (skip) {
         continue;
       } else if (branchLen) {
-        const collectedNodes = this.#nodes[i];
+        const entryNodes = this.#nodes[i];
         const lastIndex = branchLen - 1;
         if (lastIndex === 0) {
           const { leaves: [, ...filterLeaves] } = branch[0];
           if ((targetType === TARGET_ALL || targetType === TARGET_FIRST) &&
               this.#node.nodeType === ELEMENT_NODE) {
-            for (const node of collectedNodes) {
+            for (const node of entryNodes) {
               const bool = filtered || this._matchLeaves(filterLeaves, node);
               if (bool && node !== this.#node && this.#node.contains(node)) {
                 nodes.add(node);
@@ -2519,13 +2675,13 @@ export class Matcher {
           } else if (!filterLeaves.length) {
             if (targetType === TARGET_ALL) {
               const n = [...nodes];
-              nodes = new Set([...n, ...collectedNodes]);
+              nodes = new Set([...n, ...entryNodes]);
             } else {
-              const [node] = [...collectedNodes];
+              const [node] = [...entryNodes];
               nodes.add(node);
             }
           } else {
-            for (const node of collectedNodes) {
+            for (const node of entryNodes) {
               const bool = filtered || this._matchLeaves(filterLeaves, node);
               if (bool) {
                 nodes.add(node);
@@ -2536,10 +2692,11 @@ export class Matcher {
             }
           }
         } else if (find === FIND_NEXT) {
-          let { combo, leaves: [, ...filterLeaves] } = branch[0];
-          for (const node of collectedNodes) {
+          let { combo, leaves: entryLeaves } = branch[0];
+          const [, ...filterLeaves] = entryLeaves;
+          let matched;
+          for (const node of entryNodes) {
             const bool = filtered || this._matchLeaves(filterLeaves, node);
-            let matched;
             if (bool) {
               let nextNodes = new Set([node]);
               for (let j = 1; j < branchLen; j++) {
@@ -2583,11 +2740,61 @@ export class Matcher {
               break;
             }
           }
+          if (!matched && targetType === TARGET_FIRST) {
+            const [entryNode] = [...entryNodes];
+            let refNode = this._findNode(entryLeaves, {
+              targetType,
+              node: entryNode,
+              tree: this.#subtree
+            });
+            while (refNode) {
+              let nextNodes = new Set([refNode]);
+              for (let j = 1; j < branchLen; j++) {
+                const { combo: nextCombo, leaves } = branch[j];
+                const arr = [];
+                for (const nextNode of nextNodes) {
+                  const twig = {
+                    combo,
+                    leaves
+                  };
+                  const m = this._matchCombinator(twig, nextNode, { find });
+                  if (m.size) {
+                    arr.push(...m);
+                  }
+                }
+                if (arr.length) {
+                  if (j === lastIndex) {
+                    const [node] = this._sortNodes(arr);
+                    nodes.add(node);
+                    matched = true;
+                    break;
+                  } else {
+                    matched = false;
+                    combo = nextCombo;
+                    nextNodes = new Set(arr);
+                  }
+                } else {
+                  matched = false;
+                  break;
+                }
+              }
+              if (matched) {
+                break;
+              }
+              refNode = this._findNode(entryLeaves, {
+                targetType,
+                node: refNode,
+                tree: this.#subtree
+              });
+              nextNodes = new Set([refNode]);
+            }
+          }
         } else {
-          const { leaves: [, ...filterLeaves] } = branch[lastIndex];
-          for (const node of collectedNodes) {
+          const { leaves: entryLeaves } = branch[lastIndex];
+          const [, ...filterLeaves] = entryLeaves;
+          let matched;
+          for (const node of entryNodes) {
             const bool = filtered || this._matchLeaves(filterLeaves, node);
-            let matched;
             if (bool) {
               let nextNodes = new Set([node]);
               for (let j = lastIndex - 1; j >= 0; j--) {
@@ -2613,13 +2820,54 @@ export class Matcher {
                   break;
                 }
               }
-            } else {
-              matched = false;
             }
             if (matched && targetType !== TARGET_ALL) {
               break;
             }
           }
+          if (!matched && targetType === TARGET_FIRST) {
+            const [entryNode] = [...entryNodes];
+            let refNode = this._findNode(entryLeaves, {
+              targetType,
+              node: entryNode,
+              tree: this.#subtree
+            });
+            while (refNode) {
+              let nextNodes = new Set([refNode]);
+              for (let j = lastIndex - 1; j >= 0; j--) {
+                const twig = branch[j];
+                const arr = [];
+                for (const nextNode of nextNodes) {
+                  const m = this._matchCombinator(twig, nextNode, { find });
+                  if (m.size) {
+                    arr.push(...m);
+                  }
+                }
+                if (arr.length) {
+                  if (j === 0) {
+                    nodes.add(refNode);
+                    matched = true;
+                    break;
+                  } else {
+                    matched = false;
+                    nextNodes = new Set(arr);
+                  }
+                } else {
+                  matched = false;
+                  break;
+                }
+              }
+              if (matched) {
+                break;
+              }
+              refNode = this._findNode(entryLeaves, {
+                targetType,
+                node: refNode,
+                tree: this.#subtree
+              });
+              nextNodes = new Set([refNode]);
+            }
+          }
         }
       }
     }