Bug: `createRoot` function from React@18 break the css `:target`

Why this is a good first issue

CSS :target selector behavior changes with React 18's createRoot

AI Summary

The issue reports that CSS :target selector behavior breaks when using React 18's createRoot API, particularly in Chrome and Safari. The problem appears to involve rendering differences between React versions, but the exact root cause isn't clearly identified. Browser-specific behavior adds complexity to diagnosis.

Issue Description

Keywords

React 18
createRoot
CSS selector
CSS Target
:target

React version: React@18

Steps To Reproduce

open https://joyful-kelpie-c3bb20.netlify.app/buggy.html
click go to react id target link
You should see the react id target with green background
Refresh page. The green background disappears

Link to code example:

The webpage source code is simple. You could check the source code directly.

Or, you can check this: https://gist.github.com/magic-akari/475a13219394fb938cff4169a9b61eb7

The current behavior

CSS target selector does not work. The green background disappears after refresh pages.

The expected behavior

CSS target selector should work after refresh pages.

See: https://joyful-kelpie-c3bb20.netlify.app/ok.html

GitHub Labels

Status: Unconfirmed