Uncaught DOMException when element id contains a '.'

[nadine-nguyen]

Similar to #28, if an element's class name begins with a number, we get the same DOM error:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '#x0.987954339334459x1624591192249' is not a valid selector.

Following the fix for #28 in #34, below is my local fix of the library using patch-package.
But it might be worth just filtering any invalid class names?

index 858bfd6..42463ea 100644
--- a/node_modules/unique-selector/lib/getClasses.js
+++ b/node_modules/unique-selector/lib/getClasses.js
@@ -42,6 +42,7 @@ function getClasses(el) {
 function getClassSelectors(el) {
   var classList = getClasses(el).filter(Boolean);
   return classList.map(function (cl) {
-    return '.' + cl;
+    // if the CLASS starts with a number or contains ":" selecting with a dot will cause a DOMException
+    return cl.match(/(?:^\d|:)/) ? '[class*="' + cl + '"]' : '.' + cl;
   });
 }

[nadine-nguyen]

My bad. Turns out the issue was in getID again and not in getClasses

Here was my modified regex for invalid selectors to be more specific:

   if (id !== null && id !== '') {
-    // if the ID starts with a number or contains ":" selecting with a hash will cause a DOMException
-    return id.match(/(?:^\d|:)/) ? '[id="' + id + '"]' : '#' + id;
+    // ID must start with either a letter or a underscore
+    // then must only contain either letters, numbers, underscores or dash to be valid
+    return id.match(/(?:^[a-zA-Z_][\w-]*$)/) ? '#' + id : '[id="' + id + '"]';
   }

[tathastu871]

@ericclemmons
@nadine-nguyen
Just change
const elements = parentNode.querySelectorAll( selector );

to

const elements = parentNode.querySelectorAll( CSS.escape(selector) );