DOMException: Failed to execute querySelectorAll

[LowWeiLin]

Occurs when a selector value has quotes in it.
[data="value"]

This can be fixed by escaping quotes.
It may also happen for other special characters but I didn't check.

[autarc]

Thanks for pointing it out. With the last update each value is now properly escaped to ensure the creation of a valid CSS selector string. Aside of quotes it takes care of most common ISO 10646 characters which have to be escaped.

[LowWeiLin]

Thanks for the quick update.
Another issue i found was that querySelectorAll does not allow ids which starts with numbers, which makes some generated selectors not work.
Ids which starts with numbers are allowed in HTML5, and this can be solved by using [id="..."] instad of #...

[steppefox]

@autarc the bug still exists but with different case T__T

For the elements with weird class names, like:

<div class="article-image-box box-position 520_poster_16x9 asset-align-center"></div>

Library generates selector: div .article-image-box .box-position .520_poster_16x9 .asset-align-center, but class name selector .520_poster_16x9 begins with number and throws DOM Exception 😢

That selector could be replaced with [class*="520_poster_16x9"], or avoided completely =/

[autarc]

A restructure of the selector generation is planned for the next version which will cover these and a few more cases. Its going to be released soon, most likely next week.

[autarc]

The latest version just got released and solves the mentioned issues. As the new approach of finding matches is progressively built on top of general attribute selection its easier to maintain and update in the future 😉

[steppefox]

This kind of error still exists, but in different place =(

Function optimizePart throws an error in line:

https://github.com/Autarc/optimal-select/blob/master/src/optimize.js#L134

For pre part - .AppContent-main, and current selector: >.Grid.Grid--withGutter:nth-child(1). This part will have that patterns in a loop:

• .AppContent-main >.Grid--withGutter:nth-of-type(1)
• .AppContent-main > <-- it's not a valid selector

[autarc]

@steppefox Extended the check for valid composed selector pattern. Would be useful next time to have a website reference or full example to look it up as the optimizations are using the DOM for comparison as well.

[steppefox]

@autarc problem still exists =((
For the element:

<ul id="menu-main" class="menu nav nav navbar-nav navbar-right" role="navigation" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Function optimizePart fails with strange generated selector:

#menu-main span.org/SiteNavigationElement

In https://github.com/Autarc/optimal-select/blob/master/src/optimize.js#L135

[jludev1]

Need to check if variable partial becomes '>' only, and handle accordingly.
https://github.com/Autarc/optimal-select/blob/master/src/optimize.js#L130
Otherwise the pattern can become something like
... >.uncol.style-dark:nth-child(1) >.uncoltable:nth-child(1) > >.uncont:nth-child(1)
, which it will cause an exception when document.querySelectorAll() is called.
https://github.com/Autarc/optimal-select/blob/master/src/optimize.js#L135