Hey there @Zywz95! 👋

I'm not sure I understand the problem you're experiencing. Can you tell me

1. What do you expect to happen?
2. Why are you trying to use document.querySelector directly? Is it possible to write the logic within the component itself (perhaps within an effect)?

I can't seem to access your Code Sandbox repro, maybe you need to change its permissions to publicly viewable?

Thanks! ❤️

@bonelessgalaxy: true.

That said, @Zywz95, be careful about hardcoding the value :r1:—there's no guarantee that useId always return that. I'd do something more like this:

import { useEffect, useId } from "react";

function MyComponent() {
  const id = useId(); // 👈 Put it in a variable

  useEffect(() => {
    const element = document.querySelector(`#${CSS.escape(id)}`);
    // Do something with `element`
  }, [id]);

  return <div id={id}>Hello world!</div>;
}

@pwbriggs @bonelessgalaxy
Thank you for your answer. I have now fixed my CodeSandbox link to be publicly accessible, which indeed can solve my problem. What I am expecting is that the ID generated directly by the useId method should not need escaping and can be used directly. Although this approach does solve my problem, I still believe there are compatibility issues because using the character ':' in a DOM id is not a common practice. Regardless, thank you for your response.

Yeah, I agree the : makes everything more complicated. There's an ongoing discussion about this at #26839, so I think we can close this issue.

OK.looks it's been fixed.thanks.