fix(useId): make generated IDs selector compatible

close #11828

Author: yyx990803

packages/runtime-core/__tests__/helpers/useId.spec.ts

@@ -59,7 +59,7 @@ describe('useId', () => {
         const app = createApp(BasicComponentWithUseId)
         return [app, []]
       }),
-    ).toBe('v:0 v:1')
+    ).toBe('v-0 v-1')
   })
 
   test('with config.idPrefix', async () => {
@@ -69,7 +69,7 @@ describe('useId', () => {
         app.config.idPrefix = 'foo'
         return [app, []]
       }),
-    ).toBe('foo:0 foo:1')
+    ).toBe('foo-0 foo-1')
   })
 
   test('async component', async () => {
@@ -92,9 +92,9 @@ describe('useId', () => {
     }
 
     const expected =
-      'v:0 v:1 ' + // root
-      'v:0-0 v:0-1 ' + // inside first async subtree
-      'v:1-0 v:1-1' // inside second async subtree
+      'v-0 v-1 ' + // root
+      'v-0-0 v-0-1 ' + // inside first async subtree
+      'v-1-0 v-1-1' // inside second async subtree
     // assert different async resolution order does not affect id stable-ness
     expect(await getOutput(() => factory(0, 16))).toBe(expected)
     expect(await getOutput(() => factory(16, 0))).toBe(expected)
@@ -137,9 +137,9 @@ describe('useId', () => {
     }
 
     const expected =
-      'v:0 v:1 ' + // root
-      'v:0-0 v:0-1 ' + // inside first async subtree
-      'v:1-0 v:1-1' // inside second async subtree
+      'v-0 v-1 ' + // root
+      'v-0-0 v-0-1 ' + // inside first async subtree
+      'v-1-0 v-1-1' // inside second async subtree
     // assert different async resolution order does not affect id stable-ness
     expect(await getOutput(() => factory(0, 16))).toBe(expected)
     expect(await getOutput(() => factory(16, 0))).toBe(expected)
@@ -188,9 +188,9 @@ describe('useId', () => {
 
     const expected =
       '<div>' +
-      'v:0 v:1 ' + // root
-      'v:0-0 v:0-1 ' + // inside first async subtree
-      'v:1-0 v:1-1' + // inside second async subtree
+      'v-0 v-1 ' + // root
+      'v-0-0 v-0-1 ' + // inside first async subtree
+      'v-1-0 v-1-1' + // inside second async subtree
       '</div>'
     // assert different async resolution order does not affect id stable-ness
     expect(await getOutput(() => factory(0, 16))).toBe(expected)
@@ -232,10 +232,10 @@ describe('useId', () => {
     }
 
     const expected =
-      'v:0 ' + // One
-      'v:0-0 ' + // Two
-      'v:0-0-0 v:0-0-1 ' + // Three + Three nested in Two
-      'v:0-1' // Three after Two
+      'v-0 ' + // One
+      'v-0-0 ' + // Two
+      'v-0-0-0 v-0-0-1 ' + // Three + Three nested in Two
+      'v-0-1' // Three after Two
     // assert different async resolution order does not affect id stable-ness
     expect(await getOutput(() => factory())).toBe(expected)
     expect(await getOutput(() => factory())).toBe(expected)
@@ -278,8 +278,8 @@ describe('useId', () => {
 
     const expected =
       '<div>' +
-      'v:0 v:1 ' + // root
-      'v:0-0-0 v:0-0-1' + // async component inside async setup
+      'v-0 v-1 ' + // root
+      'v-0-0-0 v-0-0-1' + // async component inside async setup
       '</div>'
     // assert different async resolution order does not affect id stable-ness
     expect(await getOutput(async () => factory(0, 16))).toBe(expected)

packages/runtime-core/src/helpers/useId.ts

@@ -7,7 +7,7 @@ import { warn } from '../warning'
 export function useId(): string | undefined {
   const i = getCurrentInstance()
   if (i) {
-    return (i.appContext.config.idPrefix || 'v') + ':' + i.ids[0] + i.ids[1]++
+    return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++
   } else if (__DEV__) {
     warn(
       `useId() is called when there is no active component ` +