抛出DOMException但在控制台中工作的选择器-尾风类选择器

Question

我正在使用Tailwind和vanilla，并试图通过构建的选择器获得一些特定的节点。问题:当浏览器执行的代码(捆绑在Webpack中)时，选择器被标记为无效，但是我可以让它在web控制台中工作。

代码引发的DOMException

这里是一个可复制的示例；问题似乎围绕着包含一个w-2/4的/，所以我要转义它，使它像\\/一样。想办法解决这个问题..。

​

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>

​

回答说：“拜他所赐。”

Answer 1

我想问题是这里有4个反斜杠，parsed = selector.replace('/', '\\\\/');，应该只有两个.

工作示例：

​

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>

​