Bug: `useId()` is not valid when used as selector in e.g. `Element.closest('#' + id)`

Perhaps not a bug in the true sense of the word, more a quality-of-life issue.

React version: latest (18.2.0)

Steps To Reproduce

import { useCallback, useId } from 'react'

const isElement = (e: EventTarget | null): e is Element => e instanceof Element

export const Component = () => {
  const id = useId()

  useEffect(() => {
    const handleClick = ({ target }: MouseEvent) => {
      if (isElement(target) && target.closest(`#${id}`) == null) {
        // do something
      }
    }
    document.addEventListener('click', handleClick)
    return () => {
      document.removeEventListener('click', handleClick)
    }
  }, [id])
  
  return <div id={id} />
}

The current behavior

• Safari: SyntaxError: The string did not match the expected pattern.
• Firefox: Uncaught DOMException: Element.closest: '#:r11:' is not a valid selector
• Chrome: Uncaught DOMException: Failed to execute 'closest' on 'Element': '#:r11:' is not a valid selector.

This error is not thrown when using an alphanumeric id such as #watskeburt

The expected behavior

The return value of useId being directly usable in Element.closest(`#${id}`)

Workaround

target.closest(`#${id.replace(/:/g, '\\:')}`)

[gaearon]

I was thinking you’d do ref.current.contains(e.target) to check.

[lensbart]

Node.contains() — you learn something new every day!