useId return value is incompatible with document.querySelector · Issue #11828 · vuejs/core (original) (raw)

Vue version

3.5.0

Link to minimal reproduction

https://play.vuejs.org/#eNqFUstu2zAQ/JUFc6CCGlLb9CTIBprUBVKgD9QFeuFFENcuE4lUyaXiwPC/dyklrgUU6Y3cnZ2Z5fAg3vd9PkQUpahC401PEJBiv1LWdL3zBAdw9rOLllAvIAa81XCErXcdSJ6TyirbOBsIjIblBMguU/U0lmWXsFzBQVmAooCPtWlRAznAPTaREOTviP5xgy025LxkQZAfXBM7tCRLkBdD+VqCCWAdQQ1D3bJWeILniXZyQBjoDZvQT7P5jDeTFxJesc3R3Whlh7RuMUGvH3mvB+fvw5zu7TndHJ6dM/3k0drzvhq2zsNMeM549T+DN5tNjqGpe0wKLHEcZapiyoeT4Qth17c1Id8AKm0GKI1eKmG0EqskUxVc5G5VnKBiISiwka3Z5XfBWc58zESJxnU9h+K/9mTYqBLllFbq1W3rHj6NNfIRF8/15hc29/+o34V9qinxzWNAP6ASpx7Vnt9waq83X3DP51Ozczq2jH6h+R2Da2PyOMGu+b3Z9hludHs7/lxjdz/Cek9ow/NSyWhCHke8EvyBb15Y/a/dq/zdOMdhiOMf7ZsTTw==

Steps to reproduce

Use document.querySelector with an id generated by useId()

What is expected?

I would expect querySelector to work without thinking about escaping ID values for document.querySelector. The colon in the returned IDs is hardcoded in the vue useId function and can not be customized. I think handling these default values with colon is rather counter-intuitive.

What is actually happening?

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

System Info

No response

Any additional comments?

Maybe use something different than colon as separator?