动态拼接Tailwind类选择器触发DOMException 打包后报错控制台却正常

问题现象 #

使用Tailwind CSS搭配原生JS开发时，通过动态拼接类名生成选择器获取DOM节点的场景下，Webpack打包后的代码在浏览器运行时会抛出DOMException，提示当前选择器无效；但在浏览器控制台手动输入完全相同形式的选择器，却可以正常匹配到目标DOM节点。
经过定位，问题集中在带斜杠的Tailwind工具类（比如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);

对应的测试DOM节点：

<h3 class="inline-block statlib-kpi-value text-2xl h-4 bg-blue-400 rounded w-2/4 "></h3>

问题根源 #

CSS选择器语法中，斜杠属于特殊字符，构造合法选择器时需要对其做转义处理，问题本质是JS字符串转义和DOM API要求的转义层级不匹配：

• 代码中直接书写的字面量选择器.w-2\\/4.rounded，经过JS字符串解析后，最终传给querySelectorAll的字符串值是.w-2\/4.rounded，完全符合DOM选择器的语法要求，因此可以正常运行。
• 原代码使用replace('/', '\\\\/')的写法，四个反斜杠经过JS字符串解析后，实际会生成两个反斜杠，拼接出的最终字符串值是.w-2\\/4.rounded，相当于多做了一层转义，浏览器解析时会判定该选择器无效，因此抛出异常。

可行修复方案 #

相关修复思路参考了社区用户biberman的贡献，可选择以下两种可稳定运行的方案：

校准转义层级，匹配DOM语法要求 #

调整原replace逻辑的替换值，让最终生成的选择器字符串和手动编写的有效选择器完全一致：

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

let selector = prefix + width + prefix + rounded;
// 调整替换值：JS字符串中书写两个反斜杠，实际存储的就是单个反斜杠
selector = selector.replace('/', '\\/');

// 此时生成的选择器值为.w-2\/4.rounded，可正常完成节点匹配
const targetNodes = document.querySelectorAll(selector);

使用原生CSS.escapeAPI自动转义 #

无需手动记忆各类特殊字符的转义规则，直接调用浏览器原生提供的CSS.escape()方法，自动将类名中的所有特殊字符转换为符合选择器语法要求的格式，从根源上避免转义层级匹配错误的问题：

const width = 'w-2/4';
const rounded = 'rounded';
// 对每个类名做转义后拼接选择器
const selector = '.' + CSS.escape(width) + '.' + CSS.escape(rounded);

const targetNodes = document.querySelectorAll(selector);

该方案适配所有带特殊字符的类名，不管是含斜杠、点、冒号的Tailwind内置类，还是自定义的带特殊字符的类名，都可以自动完成转义处理，长期维护成本更低。

内容的提问来源于stack exchange，提问作者Falkettin0