Selector throwing DOMException but working in console - Tailwind class selector

user_12798958 0
Viewed 49

I'm using Tailwind CSS alongsid vanilla JS and I'm trying to get some specific nodes via a built selector. Problem : the selector is marked as invalid when the code executed by the browser (bundled in Webpack) but I can make it work in the web console.

DOMException thrown by code

Here is a reproductible sample; the problems seems to be around the w-2/4 containing a / so I'm escaping it to make it like \\/. Taking any idea to fix this ...

const prefix = '.';
const width = 'w-2/4';
const rounded = 'rounded';

const selector = prefix + width + prefix + rounded;
parsed = selector.replace('/', '\\\\/');

console.log(parsed);

const matches = document.querySelectorAll('.w-2\\/4.rounded');
console.log(matches);

const broken = document.querySelectorAll(parsed);
console.log(broken);
<h3 class="inline-block statlib-kpi-value text-2xl h-4 bg-blue-400 rounded w-2/4 "></h3>

Answered by @biberman, thanks to him.

tailwind-css javascript
1 Answers

I think the problem is that here are 4 backslashes parsed = selector.replace('/', '\\\\/'); it should be just two...

Working example:

const prefix = '.';
const width = 'w-2/4';
const rounded = 'rounded';

const selector = prefix + width + prefix + rounded;
parsed = selector.replace('/', '\\/');

console.log(parsed);

const matches = document.querySelectorAll('.w-2\\/4.rounded');
console.log(matches);

const broken = document.querySelectorAll(parsed);
console.log(broken);
<h3 class="inline-block statlib-kpi-value text-2xl h-4 bg-blue-400 rounded w-2/4 "></h3>

user_153773550
Related