@asamuzakjp/dom-selector 0.21.1 → 0.22.0

package/README.md

@@ -55,21 +55,21 @@ closest - same functionality as [Element.closest()][65]
 Returns **[object][60]?** matched node
 
 
-### querySelector(selector, refPoint, opt)
+### querySelector(selector, node, opt)
 
 querySelector - same functionality as [Document.querySelector()][66], [DocumentFragment.querySelector()][67], [Element.querySelector()][68]
 
 #### Parameters
 
 - `selector` **[string][59]** CSS selector
-- `refPoint` **[object][60]** Document, DocumentFragment or Element node
+- `node` **[object][60]** Document, DocumentFragment or Element node
 - `opt` **[object][60]?** options
   - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[object][60]?** matched node
 
 
-### querySelectorAll(selector, refPoint, opt)
+### querySelectorAll(selector, node, opt)
 
 querySelectorAll - same functionality as [Document.querySelectorAll()][69], [DocumentFragment.querySelectorAll()][70], [Element.querySelectorAll()][71]  
 **NOTE**: returns Array, not NodeList
@@ -77,7 +77,7 @@ querySelectorAll - same functionality as [Document.querySelectorAll()][69], [Doc
 #### Parameters
 
 - `selector` **[string][59]** CSS selector
-- `refPoint` **[object][60]** Document, DocumentFragment or Element node
+- `node` **[object][60]** Document, DocumentFragment or Element node
 - `opt` **[object][60]?** options
   - `opt.sort` **[boolean][61]?** sort matched nodes
   - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class

package/package.json

@@ -50,5 +50,5 @@
     "update": "npm-run-all -s update-*",
     "update-wpt": "git submodule update --init --recursive"
   },
-  "version": "0.21.1"
+  "version": "0.22.0"
 }

package/src/index.js

@@ -33,23 +33,23 @@ export const closest = (selector, node, opt) =>
 /**
  * querySelector
  * @param {string} selector - CSS selector
- * @param {object} refPoint - Document, DocumentFragment or Element node
+ * @param {object} node - Document, DocumentFragment or Element node
  * @param {object} [opt] - options
  * @param {boolean} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {?object} - matched node
  */
-export const querySelector = (selector, refPoint, opt) =>
-  new Matcher(selector, refPoint, opt).querySelector();
+export const querySelector = (selector, node, opt) =>
+  new Matcher(selector, node, opt).querySelector();
 
 /**
  * querySelectorAll
  * NOTE: returns Array, not NodeList
  * @param {string} selector - CSS selector
- * @param {object} refPoint - Document, DocumentFragment or Element node
+ * @param {object} node - Document, DocumentFragment or Element node
  * @param {object} [opt] - options
  * @param {boolean} [opt.sort] - sort matched nodes
  * @param {boolean} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {Array.<object|undefined>} - array of matched nodes
  */
-export const querySelectorAll = (selector, refPoint, opt) =>
-  new Matcher(selector, refPoint, opt).querySelectorAll();
+export const querySelectorAll = (selector, node, opt) =>
+  new Matcher(selector, node, opt).querySelectorAll();

package/src/js/dom-util.js

@@ -98,10 +98,6 @@ export const selectorToNodeProps = (selector, node) => {
   if (selector && typeof selector === 'string') {
     if (/\|/.test(selector)) {
       [prefix, tagName] = selector.split('|');
-      if (prefix && prefix !== '*' &&
-          node && !isNamespaceDeclared(prefix, node)) {
-        throw new DOMException(`invalid selector ${selector}`, SYNTAX_ERR);
-      }
     } else {
       prefix = '*';
       tagName = selector;

package/src/js/matcher.js

@@ -5,7 +5,8 @@
 /* import */
 import isCustomElementName from 'is-potential-custom-element-name';
 import {
-  isContentEditable, isSameOrDescendant, selectorToNodeProps
+  isContentEditable, isNamespaceDeclared, isSameOrDescendant,
+  selectorToNodeProps
 } from './dom-util.js';
 import {
   generateCSS, parseSelector, unescapeSelector, walkAST
@@ -26,11 +27,16 @@ const TARGET_SELF = 'self';
 
 /* regexp */
 const DIR_VALUE = /^(?:auto|ltr|rtl)$/;
-const HTML_FORM_INPUT = /^(?:(?:inpu|selec)t|textarea)$/;
-const HTML_FORM_PARTS = /^(?:button|fieldset|opt(?:group|ion))$/;
-const HTML_FORM_VALIDITY = /^(?:(?:(?:in|out)pu|selec)t|button|form|textarea)$/;
+const FORM_INPUT = /^(?:input|textarea)$/;
+const FORM_PARTS =
+  /^(?:(?:fieldse|inpu|selec)t|button|opt(?:group|ion)|textarea)$/;
+const FORM_VALIDITY = /^(?:(?:(?:in|out)pu|selec)t|button|form|textarea)$/;
+const HTML_ANCHOR = /^a(?:rea)?$/;
 const HTML_INTERACT = /^d(?:etails|ialog)$/;
+const INPUT_CHECK = /^(?:checkbox|radio)$/;
 const INPUT_RANGE = /(?:(?:rang|tim)e|date(?:time-local)?|month|number|week)$/;
+const INPUT_RESET = /^(?:button|reset)$/;
+const INPUT_SUBMIT = /^(?:image|submit)$/;
 const INPUT_TEXT = /^(?:(?:emai|te|ur)l|password|search|text)$/;
 const PSEUDO_FUNC = /^(?:(?:ha|i)s|not|where)$/;
 const PSEUDO_NTH = /^nth-(?:last-)?(?:child|of-type)$/;
@@ -145,7 +151,7 @@ export class Matcher {
         break;
       }
       default: {
-        throw new TypeError(`Unexpected node type: ${node.nodeName}`);
+        throw new TypeError(`Unexpected node ${node.nodeName}`);
       }
     }
     return {
@@ -209,7 +215,7 @@ export class Matcher {
           if (item.type === COMBINATOR) {
             const [nextItem] = items;
             if (nextItem.type === COMBINATOR) {
-              const msg = `invalid combinator ${item.name}${nextItem.name}`;
+              const msg = `Invalid combinator ${item.name}${nextItem.name}`;
               throw new DOMException(msg, SYNTAX_ERR);
             }
             branch.push({
@@ -245,42 +251,6 @@ export class Matcher {
     ];
   }
 
-  /**
-   * throw DOMExeption on pseudo element selector
-   * @param {object} astName - AST name
-   * @throws {DOMException}
-   * @returns {void}
-   */
-  _throwOnPseudoElementSelector(astName) {
-    let msg;
-    let type;
-    switch (astName) {
-      case 'after':
-      case 'backdrop':
-      case 'before':
-      case 'cue':
-      case 'cue-region':
-      case 'first-letter':
-      case 'first-line':
-      case 'file-selector-button':
-      case 'marker':
-      case 'part':
-      case 'placeholder':
-      case 'selection':
-      case 'slotted':
-      case 'target-text': {
-        msg = `Unsupported pseudo-element ::${astName}`;
-        type = NOT_SUPPORTED_ERR;
-        break;
-      }
-      default: {
-        msg = `Unknown pseudo-element ::${astName}`;
-        type = SYNTAX_ERR;
-      }
-    }
-    throw new DOMException(msg, type);
-  }
-
   /**
    * collect nth child
    * @param {object} anb - An+B options
@@ -294,84 +264,109 @@ export class Matcher {
   _collectNthChild(anb, node) {
     const { a, b, reverse, selector } = anb;
     const { parentNode } = node;
-    const selectorNodes = new Set();
+    const matched = new Set();
+    let selectorBranches;
     if (selector) {
-      let branches;
       if (this.#cache.has(selector)) {
-        branches = this.#cache.get(selector);
+        selectorBranches = this.#cache.get(selector);
       } else {
-        branches = walkAST(selector);
-        this.#cache.set(selector, branches);
+        selectorBranches = walkAST(selector);
+        this.#cache.set(selector, selectorBranches);
       }
-      const branchLen = branches.length;
-      const iterator = [...parentNode.children].values();
-      for (const refNode of iterator) {
-        let bool;
-        for (let i = 0; i < branchLen; i++) {
-          const leaves = branches[i];
-          bool = this._matchLeaves(leaves, refNode);
-          if (!bool) {
-            break;
+    }
+    if (parentNode) {
+      const arr = [...parentNode.children];
+      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];
+              bool = this._matchLeaves(leaves, refNode);
+              if (!bool) {
+                break;
+              }
+            }
+            if (bool) {
+              selectorNodes.add(refNode);
+            }
           }
         }
-        if (bool) {
-          selectorNodes.add(refNode);
+        if (reverse) {
+          arr.reverse();
         }
-      }
-    }
-    const arr = [...parentNode.children];
-    if (reverse) {
-      arr.reverse();
-    }
-    const l = arr.length;
-    const matched = new Set();
-    // :first-child, :last-child, :nth-child(0 of S)
-    if (a === 0) {
-      if (b > 0 && b <= l) {
-        if (selectorNodes.size) {
-          for (let i = 0; i < l; i++) {
-            const current = arr[i];
-            if (selectorNodes.has(current)) {
+        // :first-child, :last-child, :nth-child(0 of S)
+        if (a === 0) {
+          if (b > 0 && b <= l) {
+            if (selectorNodes.size) {
+              for (let i = 0; i < l; i++) {
+                const current = arr[i];
+                if (selectorNodes.has(current)) {
+                  matched.add(current);
+                  break;
+                }
+              }
+            } else if (!selector) {
+              const current = arr[b - 1];
               matched.add(current);
-              break;
             }
           }
-        } else if (!selector) {
-          const current = arr[b - 1];
-          matched.add(current);
-        }
-      }
-    // :nth-child()
-    } else {
-      let n = 0;
-      let nth = b - 1;
-      if (a > 0) {
-        while (nth < 0) {
-          nth += (++n * a);
-        }
-      }
-      if (nth >= 0 && nth < l) {
-        let j = a > 0 ? 0 : b - 1;
-        for (let i = 0; i < l && nth >= 0 && nth < l; i++) {
-          const current = arr[i];
-          if (selectorNodes.size) {
-            if (selectorNodes.has(current)) {
-              if (j === nth) {
-                matched.add(current);
+        // :nth-child()
+        } else {
+          let n = 0;
+          let nth = b - 1;
+          if (a > 0) {
+            while (nth < 0) {
+              nth += (++n * a);
+            }
+          }
+          if (nth >= 0 && nth < l) {
+            let j = a > 0 ? 0 : b - 1;
+            for (let i = 0; i < l && nth >= 0 && nth < l; i++) {
+              const current = arr[i];
+              if (selectorNodes.size) {
+                if (selectorNodes.has(current)) {
+                  if (j === nth) {
+                    matched.add(current);
+                    nth += a;
+                  }
+                  if (a > 0) {
+                    j++;
+                  } else {
+                    j--;
+                  }
+                }
+              } else if (i === nth) {
+                if (!selector) {
+                  matched.add(current);
+                }
                 nth += a;
               }
-              if (a > 0) {
-                j++;
-              } else {
-                j--;
-              }
             }
-          } else if (i === nth) {
-            if (!selector) {
-              matched.add(current);
+          }
+        }
+      }
+    } else {
+      const { root } = this.#root;
+      if (root.nodeType === ELEMENT_NODE && node === root && (a + b) === 1) {
+        if (selectorBranches) {
+          const branchesLen = selectorBranches.length;
+          let bool;
+          for (let i = 0; i < branchesLen; i++) {
+            const leaves = selectorBranches[i];
+            bool = this._matchLeaves(leaves, node);
+            if (bool) {
+              break;
             }
-            nth += a;
           }
+          if (bool) {
+            matched.add(node);
+          }
+        } else {
+          matched.add(node);
         }
       }
     }
@@ -390,56 +385,65 @@ export class Matcher {
   _collectNthOfType(anb, node) {
     const { a, b, reverse } = anb;
     const { localName, parentNode, prefix } = node;
-    const arr = [...parentNode.children];
-    if (reverse) {
-      arr.reverse();
-    }
-    const l = arr.length;
     const matched = new Set();
-    // :first-of-type, :last-of-type
-    if (a === 0) {
-      if (b > 0 && b <= l) {
-        let j = 0;
-        for (let i = 0; i < l; i++) {
-          const current = arr[i];
-          const { localName: itemLocalName, prefix: itemPrefix } = current;
-          if (itemLocalName === localName && itemPrefix === prefix) {
-            if (j === b - 1) {
-              matched.add(current);
-              break;
+    if (parentNode) {
+      const arr = [...parentNode.children];
+      const l = arr.length;
+      if (l) {
+        if (reverse) {
+          arr.reverse();
+        }
+        // :first-of-type, :last-of-type
+        if (a === 0) {
+          if (b > 0 && b <= l) {
+            let j = 0;
+            for (let i = 0; i < l; i++) {
+              const current = arr[i];
+              const { localName: itemLocalName, prefix: itemPrefix } = current;
+              if (itemLocalName === localName && itemPrefix === prefix) {
+                if (j === b - 1) {
+                  matched.add(current);
+                  break;
+                }
+                j++;
+              }
             }
-            j++;
           }
-        }
-      }
-    // :nth-of-type()
-    } else {
-      let nth = b - 1;
-      if (a > 0) {
-        while (nth < 0) {
-          nth += a;
-        }
-      }
-      if (nth >= 0 && nth < l) {
-        let j = a > 0 ? 0 : b - 1;
-        for (let i = 0; i < l; i++) {
-          const current = arr[i];
-          const { localName: itemLocalName, prefix: itemPrefix } = current;
-          if (itemLocalName === localName && itemPrefix === prefix) {
-            if (j === nth) {
-              matched.add(current);
+        // :nth-of-type()
+        } else {
+          let nth = b - 1;
+          if (a > 0) {
+            while (nth < 0) {
               nth += a;
             }
-            if (nth < 0 || nth >= l) {
-              break;
-            } else if (a > 0) {
-              j++;
-            } else {
-              j--;
+          }
+          if (nth >= 0 && nth < l) {
+            let j = a > 0 ? 0 : b - 1;
+            for (let i = 0; i < l; i++) {
+              const current = arr[i];
+              const { localName: itemLocalName, prefix: itemPrefix } = current;
+              if (itemLocalName === localName && itemPrefix === prefix) {
+                if (j === nth) {
+                  matched.add(current);
+                  nth += a;
+                }
+                if (nth < 0 || nth >= l) {
+                  break;
+                } else if (a > 0) {
+                  j++;
+                } else {
+                  j--;
+                }
+              }
             }
           }
         }
       }
+    } else {
+      const { root } = this.#root;
+      if (root.nodeType === ELEMENT_NODE && node === root && (a + b) === 1) {
+        matched.add(node);
+      }
     }
     return matched;
   }
@@ -489,7 +493,7 @@ export class Matcher {
       }
     }
     let matched = new Set();
-    if (anbMap.has('a') && anbMap.has('b') && node.parentNode) {
+    if (anbMap.has('a') && anbMap.has('b')) {
       if (/^nth-(?:last-)?child$/.test(nthName)) {
         if (selector) {
           anbMap.set('selector', selector);
@@ -510,6 +514,50 @@ export class Matcher {
     return matched;
   }
 
+  /**
+   * match pseudo element selector
+   * @param {string} astName - AST name
+   * @param {object} opt - options
+   * @throws {DOMException}
+   * @returns {void}
+   */
+  _matchPseudoElementSelector(astName, opt = {}) {
+    const { forgive } = opt;
+    switch (astName) {
+      case 'after':
+      case 'backdrop':
+      case 'before':
+      case 'cue':
+      case 'cue-region':
+      case 'first-letter':
+      case 'first-line':
+      case 'file-selector-button':
+      case 'marker':
+      case 'part':
+      case 'placeholder':
+      case 'selection':
+      case 'slotted':
+      case 'target-text': {
+        if (this.#warn) {
+          throw new DOMException(`Unsupported pseudo-element ::${astName}`,
+            NOT_SUPPORTED_ERR);
+        }
+        break;
+      }
+      default: {
+        if (astName.startsWith('-webkit-')) {
+          if (this.#warn) {
+            throw new DOMException(`Unsupported pseudo-element ::${astName}`,
+              NOT_SUPPORTED_ERR);
+          }
+        } else if (!forgive) {
+          throw new DOMException(`Unknown pseudo-element ::${astName}`,
+            SYNTAX_ERR);
+        }
+      }
+    }
+  }
+
   /**
    * match directionality pseudo-class - :dir()
    * @see https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute
@@ -534,14 +582,17 @@ export class Matcher {
       } else if (nodeDir === 'auto' &&
                  (localName === 'textarea' ||
                   (localName === 'input' &&
-                   (!inputType ||
-                    /^(?:(?:emai|te|ur)l|search|text)$/.test(inputType))))) {
-        throw new DOMException('Unsupported pseudo-class :dir()',
-          NOT_SUPPORTED_ERR);
+                   (!inputType || INPUT_TEXT.test(inputType))))) {
+        if (this.#warn) {
+          throw new DOMException('Unsupported pseudo-class :dir()',
+            NOT_SUPPORTED_ERR);
+        }
       // FIXME:
       } else if (nodeDir === 'auto' || (localName === 'bdi' && !nodeDir)) {
-        throw new DOMException('Unsupported pseudo-class :dir()',
-          NOT_SUPPORTED_ERR);
+        if (this.#warn) {
+          throw new DOMException('Unsupported pseudo-class :dir()',
+            NOT_SUPPORTED_ERR);
+        }
       } else if (!nodeDir) {
         let parent = node.parentNode;
         while (parent) {
@@ -663,7 +714,8 @@ export class Matcher {
       if (nodes.size) {
         if (leaves.length) {
           for (const nextNode of nodes) {
-            bool = this._matchHasPseudoFunc(leaves, nextNode);
+            bool =
+              this._matchHasPseudoFunc(Object.assign([], leaves), nextNode);
             if (bool) {
               break;
             }
@@ -678,20 +730,22 @@ export class Matcher {
 
   /**
    * match logical pseudo-class functions - :has(), :is(), :not(), :where()
-   * @param {object} astOpt - AST options
+   * @param {object} astData - AST data
    * @param {object} node - Element node
    * @returns {?object} - matched node
    */
-  _matchLogicalPseudoFunc(astOpt = {}, node) {
-    const { astName = '', branches = [], selector = '' } = astOpt;
+  _matchLogicalPseudoFunc(astData, node) {
+    const {
+      astName = '', branches = [], selector = '', twigBranches = []
+    } = astData;
     let res;
-    const branchLen = branches.length;
     if (astName === 'has') {
       if (selector.includes(':has(')) {
         res = null;
       } else {
         let bool;
-        for (let i = 0; i < branchLen; i++) {
+        const l = branches.length;
+        for (let i = 0; i < l; i++) {
           const leaves = branches[i];
           bool = this._matchHasPseudoFunc(Object.assign([], leaves), node);
           if (bool) {
@@ -702,15 +756,45 @@ export class Matcher {
           res = node;
         }
       }
-    // NOTE: according to MDN, :not() can not contain :not()
-    // but spec says nothing about that?
-    } else if (astName === 'not' && selector.includes(':not(')) {
-      res = null;
     } else {
+      const forgive = /^(?:is|where)$/.test(astName);
       let bool;
-      for (let i = 0; i < branchLen; i++) {
-        const leaves = branches[i];
-        bool = this._matchLeaves(leaves, node);
+      const l = twigBranches.length;
+      for (let i = 0; i < l; i++) {
+        const branch = twigBranches[i];
+        const lastIndex = branch.length - 1;
+        const { leaves } = branch[lastIndex];
+        bool = this._matchLeaves(leaves, node, {
+          forgive
+        });
+        if (bool && lastIndex > 0) {
+          let nextNodes = new Set([node]);
+          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, {
+                forgive,
+                find: 'prev'
+              });
+              if (m.size) {
+                arr.push(...m);
+              }
+            }
+            const matchedNodes = new Set(arr);
+            if (matchedNodes.size) {
+              if (j === 0) {
+                bool = true;
+                break;
+              } else {
+                nextNodes = matchedNodes;
+              }
+            } else {
+              bool = false;
+              break;
+            }
+          }
+        }
         if (bool) {
           break;
         }
@@ -731,38 +815,64 @@ export class Matcher {
    * @see https://html.spec.whatwg.org/#pseudo-classes
    * @param {object} ast - AST
    * @param {object} node - Element node
+   * @param {object} opt - options
    * @returns {object} - collection of matched nodes
    */
-  _matchPseudoClassSelector(ast, node) {
+  _matchPseudoClassSelector(ast, node, opt = {}) {
     const { children: astChildren } = ast;
     const { localName, parentNode } = node;
+    const { forgive } = opt;
     const astName = unescapeSelector(ast.name);
     let matched = new Set();
     // :has(), :is(), :not(), :where()
     if (PSEUDO_FUNC.test(astName)) {
-      let opt;
+      let astData;
       if (this.#cache.has(ast)) {
-        opt = this.#cache.get(ast);
+        astData = this.#cache.get(ast);
       } else {
         const branches = walkAST(ast);
-        const branchLen = branches.length;
-        const branchSelectors = [];
-        for (let i = 0; i < branchLen; i++) {
-          const leaves = branches[i];
+        const selectors = [];
+        const twigBranches = [];
+        for (const [...leaves] of branches) {
           for (const leaf of leaves) {
             const css = generateCSS(leaf);
-            branchSelectors.push(css);
+            selectors.push(css);
+          }
+          const branch = [];
+          const leavesSet = new Set();
+          let item = leaves.shift();
+          while (item) {
+            if (item.type === COMBINATOR) {
+              branch.push({
+                combo: item,
+                leaves: [...leavesSet]
+              });
+              leavesSet.clear();
+            } else if (item) {
+              leavesSet.add(item);
+            }
+            if (leaves.length) {
+              item = leaves.shift();
+            } else {
+              branch.push({
+                combo: null,
+                leaves: [...leavesSet]
+              });
+              leavesSet.clear();
+              break;
+            }
           }
+          twigBranches.push(branch);
         }
-        const selector = branchSelectors.join(',');
-        opt = {
+        astData = {
           astName,
           branches,
-          selector
+          twigBranches,
+          selector: selectors.join(',')
         };
-        this.#cache.set(ast, opt);
+        this.#cache.set(ast, astData);
       }
-      const res = this._matchLogicalPseudoFunc(opt, node);
+      const res = this._matchLogicalPseudoFunc(astData, node);
       if (res) {
         matched.add(res);
       }
@@ -790,28 +900,35 @@ export class Matcher {
         switch (astName) {
           case 'current':
           case 'nth-col':
-          case 'nth-last-col':
-            throw new DOMException(`Unsupported pseudo-class :${astName}()`,
-              NOT_SUPPORTED_ERR);
-          default:
-            throw new DOMException(`Unknown pseudo-class :${astName}()`,
-              SYNTAX_ERR);
+          case 'nth-last-col': {
+            if (this.#warn) {
+              throw new DOMException(`Unsupported pseudo-class :${astName}()`,
+                NOT_SUPPORTED_ERR);
+            }
+            break;
+          }
+          default: {
+            if (!forgive) {
+              throw new DOMException(`Unknown pseudo-class :${astName}()`,
+                SYNTAX_ERR);
+            }
+          }
         }
       }
     } else {
-      const { document } = this.#root;
-      const root = document.documentElement;
+      const { document, root } = this.#root;
+      const { documentElement } = document;
       const docURL = new URL(document.URL);
       switch (astName) {
         case 'any-link':
         case 'link': {
-          if (/^a(?:rea)?$/.test(localName) && node.hasAttribute('href')) {
+          if (HTML_ANCHOR.test(localName) && node.hasAttribute('href')) {
             matched.add(node);
           }
           break;
         }
         case 'local-link': {
-          if (/^a(?:rea)?$/.test(localName) && node.hasAttribute('href')) {
+          if (HTML_ANCHOR.test(localName) && node.hasAttribute('href')) {
             const attrURL = new URL(node.getAttribute('href'), docURL.href);
             if (attrURL.origin === docURL.origin &&
                 attrURL.pathname === docURL.pathname) {
@@ -850,7 +967,7 @@ export class Matcher {
             if (node === this.#node) {
               matched.add(node);
             }
-          } else if (node === root) {
+          } else if (node === documentElement) {
             matched.add(node);
           }
           break;
@@ -885,9 +1002,7 @@ export class Matcher {
           break;
         }
         case 'disabled': {
-          if (HTML_FORM_INPUT.test(localName) ||
-              HTML_FORM_PARTS.test(localName) ||
-              isCustomElementName(localName)) {
+          if (FORM_PARTS.test(localName) || isCustomElementName(localName)) {
             if (node.disabled || node.hasAttribute('disabled')) {
               matched.add(node);
             } else {
@@ -907,16 +1022,14 @@ export class Matcher {
           break;
         }
         case 'enabled': {
-          if ((HTML_FORM_INPUT.test(localName) ||
-               HTML_FORM_PARTS.test(localName) ||
-               isCustomElementName(localName)) &&
+          if ((FORM_PARTS.test(localName) || isCustomElementName(localName)) &&
               !(node.disabled && node.hasAttribute('disabled'))) {
             matched.add(node);
           }
           break;
         }
         case 'read-only': {
-          if (/^(?:input|textarea)$/.test(localName)) {
+          if (FORM_INPUT.test(localName)) {
             let targetNode;
             if (localName === 'input') {
               if (node.hasAttribute('type')) {
@@ -930,7 +1043,7 @@ export class Matcher {
               } else {
                 targetNode = node;
               }
-            } else if (localName === 'textarea') {
+            } else {
               targetNode = node;
             }
             if (targetNode) {
@@ -945,7 +1058,7 @@ export class Matcher {
           break;
         }
         case 'read-write': {
-          if (/^(?:input|textarea)$/.test(localName)) {
+          if (FORM_INPUT.test(localName)) {
             let targetNode;
             if (localName === 'input') {
               if (node.hasAttribute('type')) {
@@ -959,7 +1072,7 @@ export class Matcher {
               } else {
                 targetNode = node;
               }
-            } else if (localName === 'textarea') {
+            } else {
               targetNode = node;
             }
             if (targetNode) {
@@ -996,7 +1109,7 @@ export class Matcher {
         }
         case 'checked': {
           if ((localName === 'input' && node.hasAttribute('type') &&
-               /^(?:checkbox|radio)$/.test(node.getAttribute('type')) &&
+               INPUT_CHECK.test(node.getAttribute('type')) &&
                node.checked) ||
               (localName === 'option' && node.selected)) {
             matched.add(node);
@@ -1019,7 +1132,7 @@ export class Matcher {
               parent = parent.parentNode;
             }
             if (!parent) {
-              parent = root;
+              parent = documentElement;
             }
             const nodes = [...parent.getElementsByTagName('input')];
             let checked;
@@ -1047,9 +1160,9 @@ export class Matcher {
           // button[type="submit"], input[type="submit"], input[type="image"]
           if ((localName === 'button' &&
                !(node.hasAttribute('type') &&
-                 /^(?:button|reset)$/.test(node.getAttribute('type')))) ||
+                 INPUT_RESET.test(node.getAttribute('type')))) ||
               (localName === 'input' && node.hasAttribute('type') &&
-               /^(?:image|submit)$/.test(node.getAttribute('type')))) {
+               INPUT_SUBMIT.test(node.getAttribute('type')))) {
             let form = node.parentNode;
             while (form) {
               if (form.localName === 'form') {
@@ -1065,10 +1178,10 @@ export class Matcher {
                 let m;
                 if (nodeName === 'button') {
                   m = !(nextNode.hasAttribute('type') &&
-                    /^(?:button|reset)$/.test(nextNode.getAttribute('type')));
+                    INPUT_RESET.test(nextNode.getAttribute('type')));
                 } else if (nodeName === 'input') {
                   m = nextNode.hasAttribute('type') &&
-                    /^(?:image|submit)$/.test(nextNode.getAttribute('type'));
+                    INPUT_SUBMIT.test(nextNode.getAttribute('type'));
                 }
                 if (m) {
                   if (nextNode === node) {
@@ -1081,7 +1194,7 @@ export class Matcher {
             }
           // input[type="checkbox"], input[type="radio"]
           } else if (localName === 'input' && node.hasAttribute('type') &&
-                     /^(?:checkbox|radio)$/.test(node.getAttribute('type')) &&
+                     INPUT_CHECK.test(node.getAttribute('type')) &&
                      node.hasAttribute('checked')) {
             matched.add(node);
           // option
@@ -1099,8 +1212,10 @@ export class Matcher {
             }
             // FIXME:
             if (isMultiple) {
-              throw new DOMException(`Unsupported pseudo-class :${astName}`,
-                NOT_SUPPORTED_ERR);
+              if (this.#warn) {
+                throw new DOMException(`Unsupported pseudo-class :${astName}`,
+                  NOT_SUPPORTED_ERR);
+              }
             } else {
               const firstOpt = parentNode.firstElementChild;
               const defaultOpt = new Set();
@@ -1123,12 +1238,11 @@ export class Matcher {
           break;
         }
         case 'valid': {
-          if (HTML_FORM_VALIDITY.test(localName)) {
+          if (FORM_VALIDITY.test(localName)) {
             if (node.checkValidity()) {
               matched.add(node);
             }
           } else if (/^fieldset$/.test(localName)) {
-            const { document } = this.#root;
             const iterator = document.createNodeIterator(node, SHOW_ELEMENT);
             let refNode = iterator.nextNode();
             if (refNode === node) {
@@ -1136,7 +1250,7 @@ export class Matcher {
             }
             let bool;
             while (refNode) {
-              if (HTML_FORM_VALIDITY.test(refNode.localName)) {
+              if (FORM_VALIDITY.test(refNode.localName)) {
                 bool = refNode.checkValidity();
                 if (!bool) {
                   break;
@@ -1151,12 +1265,11 @@ export class Matcher {
           break;
         }
         case 'invalid': {
-          if (HTML_FORM_VALIDITY.test(localName)) {
+          if (FORM_VALIDITY.test(localName)) {
             if (!node.checkValidity()) {
               matched.add(node);
             }
           } else if (/^fieldset$/.test(localName)) {
-            const { document } = this.#root;
             const iterator = document.createNodeIterator(node, SHOW_ELEMENT);
             let refNode = iterator.nextNode();
             if (refNode === node) {
@@ -1164,7 +1277,7 @@ export class Matcher {
             }
             let bool;
             while (refNode) {
-              if (HTML_FORM_VALIDITY.test(refNode.localName)) {
+              if (FORM_VALIDITY.test(refNode.localName)) {
                 bool = refNode.checkValidity();
                 if (!bool) {
                   break;
@@ -1256,7 +1369,7 @@ export class Matcher {
           break;
         }
         case 'root': {
-          if (node === root) {
+          if (node === documentElement) {
             matched.add(node);
           }
           break;
@@ -1281,20 +1394,24 @@ export class Matcher {
           break;
         }
         case 'first-child': {
-          if (parentNode && node === parentNode.firstElementChild) {
+          if ((parentNode && node === parentNode.firstElementChild) ||
+              (root.nodeType === ELEMENT_NODE && node === root)) {
             matched.add(node);
           }
           break;
         }
         case 'last-child': {
-          if (parentNode && node === parentNode.lastElementChild) {
+          if ((parentNode && node === parentNode.lastElementChild) ||
+              (root.nodeType === ELEMENT_NODE && node === root)) {
             matched.add(node);
           }
           break;
         }
         case 'only-child': {
-          if (parentNode && node === parentNode.firstElementChild &&
-              node === parentNode.lastElementChild) {
+          if ((parentNode &&
+               node === parentNode.firstElementChild &&
+               node === parentNode.lastElementChild) ||
+              (root.nodeType === ELEMENT_NODE && node === root)) {
             matched.add(node);
           }
           break;
@@ -1308,6 +1425,8 @@ export class Matcher {
             if (node1) {
               matched.add(node1);
             }
+          } else if (root.nodeType === ELEMENT_NODE && node === root) {
+            matched.add(node);
           }
           break;
         }
@@ -1321,6 +1440,8 @@ export class Matcher {
             if (node1) {
               matched.add(node1);
             }
+          } else if (root.nodeType === ELEMENT_NODE && node === root) {
+            matched.add(node);
           }
           break;
         }
@@ -1340,6 +1461,8 @@ export class Matcher {
                 matched.add(node);
               }
             }
+          } else if (root.nodeType === ELEMENT_NODE && node === root) {
+            matched.add(node);
           }
           break;
         }
@@ -1348,8 +1471,11 @@ export class Matcher {
         case 'before':
         case 'first-letter':
         case 'first-line': {
-          throw new DOMException(`Unsupported pseudo-element ::${astName}`,
-            NOT_SUPPORTED_ERR);
+          if (this.#warn) {
+            throw new DOMException(`Unsupported pseudo-element ::${astName}`,
+              NOT_SUPPORTED_ERR);
+          }
+          break;
         }
         case 'active':
         case 'autofill':
@@ -1372,12 +1498,22 @@ export class Matcher {
         case 'user-valid':
         case 'volume-locked':
         case '-webkit-autofill': {
-          throw new DOMException(`Unsupported pseudo-class :${astName}`,
-            NOT_SUPPORTED_ERR);
+          if (this.#warn) {
+            throw new DOMException(`Unsupported pseudo-class :${astName}`,
+              NOT_SUPPORTED_ERR);
+          }
+          break;
         }
         default: {
-          throw new DOMException(`Unknown pseudo-class :${astName}`,
-            SYNTAX_ERR);
+          if (astName.startsWith('-webkit-')) {
+            if (this.#warn) {
+              throw new DOMException(`Unsupported pseudo-class :${astName}`,
+                NOT_SUPPORTED_ERR);
+            }
+          } else if (!forgive) {
+            throw new DOMException(`Unknown pseudo-class :${astName}`,
+              SYNTAX_ERR);
+          }
         }
       }
     }
@@ -1395,7 +1531,7 @@ export class Matcher {
       flags: astFlags, matcher: astMatcher, name: astName, value: astValue
     } = ast;
     if (typeof astFlags === 'string' && !/^[is]$/i.test(astFlags)) {
-      throw new DOMException('invalid attribute selector', SYNTAX_ERR);
+      throw new DOMException('Invalid attribute selector', SYNTAX_ERR);
     }
     const { attributes } = node;
     let res;
@@ -1450,7 +1586,8 @@ export class Matcher {
               if (/:/.test(itemName)) {
                 const [itemNamePrefix, itemNameLocalName] = itemName.split(':');
                 if (astAttrPrefix === itemNamePrefix &&
-                    astAttrLocalName === itemNameLocalName) {
+                    astAttrLocalName === itemNameLocalName &&
+                    isNamespaceDeclared(astAttrPrefix, node)) {
                   attrValues.add(itemValue);
                 }
               }
@@ -1649,7 +1786,8 @@ export class Matcher {
       if (astNodeName === '*' || astNodeName === nodeName) {
         res = node;
       }
-    } else if (astPrefix === nodePrefix) {
+    } else if (astPrefix === nodePrefix &&
+               isNamespaceDeclared(astPrefix, node)) {
       if (astNodeName === '*' || astNodeName === nodeName) {
         res = node;
       }
@@ -1661,9 +1799,10 @@ export class Matcher {
    * match selector
    * @param {object} ast - AST
    * @param {object} node - Document, DocumentFragment, Element node
+   * @param {object} opt - options
    * @returns {object} - collection of matched nodes
    */
-  _matchSelector(ast, node) {
+  _matchSelector(ast, node, opt) {
     const { type } = ast;
     let matched = new Set();
     if (node.nodeType === ELEMENT_NODE) {
@@ -1690,7 +1829,7 @@ export class Matcher {
           break;
         }
         case PSEUDO_CLASS_SELECTOR: {
-          const nodes = this._matchPseudoClassSelector(ast, node);
+          const nodes = this._matchPseudoClassSelector(ast, node, opt);
           if (nodes.size) {
             matched = nodes;
           }
@@ -1698,7 +1837,7 @@ export class Matcher {
         }
         case PSEUDO_ELEMENT_SELECTOR: {
           const astName = unescapeSelector(ast.name);
-          this._throwOnPseudoElementSelector(astName);
+          this._matchPseudoElementSelector(astName, opt);
           break;
         }
         case TYPE_SELECTOR:
@@ -1717,12 +1856,13 @@ export class Matcher {
    * match leaves
    * @param {Array.<object>} leaves - AST leaves
    * @param {object} node - node
+   * @param {object} opt - options
    * @returns {boolean} - result
    */
-  _matchLeaves(leaves, node) {
+  _matchLeaves(leaves, node, opt) {
     let bool;
     for (const leaf of leaves) {
-      bool = this._matchSelector(leaf, node).has(node);
+      bool = this._matchSelector(leaf, node, opt).has(node);
       if (!bool) {
         break;
       }
@@ -1807,7 +1947,7 @@ export class Matcher {
         break;
       }
       case PSEUDO_ELEMENT_SELECTOR: {
-        this._throwOnPseudoElementSelector(leafName);
+        this._matchPseudoElementSelector(leafName);
         break;
       }
       default: {
@@ -1831,7 +1971,7 @@ export class Matcher {
   _matchCombinator(twig, node, opt = {}) {
     const { combo, leaves } = twig;
     const { name: comboName } = combo;
-    const { find } = opt;
+    const { find, forgive } = opt;
     let matched = new Set();
     if (find === 'next') {
       switch (comboName) {
@@ -1893,7 +2033,9 @@ export class Matcher {
         case '+': {
           const refNode = node.previousElementSibling;
           if (refNode) {
-            const bool = this._matchLeaves(leaves, refNode);
+            const bool = this._matchLeaves(leaves, refNode, {
+              forgive
+            });
             if (bool) {
               matched.add(refNode);
             }
@@ -1904,7 +2046,9 @@ export class Matcher {
           const arr = [];
           let refNode = node.previousElementSibling;
           while (refNode) {
-            const bool = this._matchLeaves(leaves, refNode);
+            const bool = this._matchLeaves(leaves, refNode, {
+              forgive
+            });
             if (bool) {
               arr.push(refNode);
             }
@@ -1918,7 +2062,9 @@ export class Matcher {
         case '>': {
           const refNode = node.parentNode;
           if (refNode) {
-            const bool = this._matchLeaves(leaves, refNode);
+            const bool = this._matchLeaves(leaves, refNode, {
+              forgive
+            });
             if (bool) {
               matched.add(refNode);
             }
@@ -1930,7 +2076,9 @@ export class Matcher {
           const arr = [];
           let refNode = node.parentNode;
           while (refNode) {
-            const bool = this._matchLeaves(leaves, refNode);
+            const bool = this._matchLeaves(leaves, refNode, {
+              forgive
+            });
             if (bool) {
               arr.push(refNode);
             }
@@ -2105,7 +2253,7 @@ export class Matcher {
         break;
       }
       case PSEUDO_ELEMENT_SELECTOR: {
-        this._throwOnPseudoElementSelector(leafName);
+        this._matchPseudoElementSelector(leafName);
         break;
       }
       default: {
@@ -2372,7 +2520,7 @@ export class Matcher {
    */
   matches() {
     if (this.#node.nodeType !== ELEMENT_NODE) {
-      throw new TypeError(`Unexpected node type: ${this.#node.nodeName}`);
+      throw new TypeError(`Unexpected node ${this.#node.nodeName}`);
     }
     let res;
     try {
@@ -2390,7 +2538,7 @@ export class Matcher {
    */
   closest() {
     if (this.#node.nodeType !== ELEMENT_NODE) {
-      throw new TypeError(`Unexpected node type: ${this.#node.nodeName}`);
+      throw new TypeError(`Unexpected node ${this.#node.nodeName}`);
     }
     let res;
     try {

package/src/js/parser.js

@@ -102,7 +102,7 @@ export const preprocess = (...args) => {
     selector = Object.prototype.toString.call(selector)
       .slice(TYPE_FROM, TYPE_TO).toLowerCase();
   } else {
-    throw new DOMException(`invalid selector ${selector}`, SYNTAX_ERR);
+    throw new DOMException(`Invalid selector ${selector}`, SYNTAX_ERR);
   }
   return selector;
 };
@@ -116,7 +116,7 @@ export const parseSelector = selector => {
   selector = preprocess(selector);
   // invalid selectors
   if (/^$|^\s*>|,\s*$/.test(selector)) {
-    throw new DOMException(`invalid selector ${selector}`, SYNTAX_ERR);
+    throw new DOMException(`Invalid selector ${selector}`, SYNTAX_ERR);
   }
   let res;
   try {

package/types/index.d.ts

@@ -4,10 +4,10 @@ export function matches(selector: string, node: object, opt?: {
 export function closest(selector: string, node: object, opt?: {
     warn?: boolean;
 }): object | null;
-export function querySelector(selector: string, refPoint: object, opt?: {
+export function querySelector(selector: string, node: object, opt?: {
     warn?: boolean;
 }): object | null;
-export function querySelectorAll(selector: string, refPoint: object, opt?: {
+export function querySelectorAll(selector: string, node: object, opt?: {
     sort?: boolean;
     warn?: boolean;
 }): Array<object | undefined>;

package/types/js/matcher.d.ts

@@ -7,7 +7,6 @@ export class Matcher {
     _getRoot(node?: object): object;
     _sortLeaves(leaves: Array<object>): Array<object>;
     _prepare(selector?: string): Array<Array<object | undefined>>;
-    _throwOnPseudoElementSelector(astName: object): void;
     _collectNthChild(anb: {
         a: number;
         b: number;
@@ -20,17 +19,18 @@ export class Matcher {
         reverse?: boolean;
     }, node: object): object;
     _matchAnPlusB(ast: object, node: object, nthName: string): object;
+    _matchPseudoElementSelector(astName: string, opt?: object): void;
     _matchDirectionPseudoClass(ast: object, node: object): object | null;
     _matchLanguagePseudoClass(ast: object, node: object): object | null;
     _matchHasPseudoFunc(leaves: Array<object>, node: object): boolean;
-    _matchLogicalPseudoFunc(astOpt: object, node: object): object | null;
-    _matchPseudoClassSelector(ast: object, node: object): object;
+    _matchLogicalPseudoFunc(astData: object, node: object): object | null;
+    _matchPseudoClassSelector(ast: object, node: object, opt?: object): object;
     _matchAttributeSelector(ast: object, node: object): object | null;
     _matchClassSelector(ast: object, node: object): object | null;
     _matchIDSelector(ast: object, node: object): object | null;
     _matchTypeSelector(ast: object, node: object): object | null;
-    _matchSelector(ast: object, node: object): object;
-    _matchLeaves(leaves: Array<object>, node: object): boolean;
+    _matchSelector(ast: object, node: object, opt: object): object;
+    _matchLeaves(leaves: Array<object>, node: object, opt: object): boolean;
     _findDescendantNodes(leaves: Array<object>, baseNode: object): object;
     _matchCombinator(twig: object, node: object, opt?: {
         find?: string;