[React 19] inline style tag not removing when new content is loaded without that element

[tounsoo]

Summary

Trying out the inline style referred in the doc and it works as expected on initial load.

After the initial load, if I change to page (or navigate to a different content) where some of the element in the initial page isn't used, I expect the style tag for those to be removed but looks like they are just there and it compounds new ones.

Is this by design? If so, what is the benefit of doing this?

If it isn't, am I doing something wrong?

What can I do in short term?

Screenshots

"Shadow Dom" page has `data-href="_8rfbtm-lg"` and `data-href="_8rfbtm-md"` only.

Moving to another page that doesn't have _8rfbtm-lg, I expect that style tag to be removed but its still there:

[Andarist]

FWIW, this is currently expected. It matches the behavior of all (most?) existing CSS-in-JS libraries. Styles are not cleaned up, there is no "garbage collection" implemented for them. It's likely that the user navigates back to the page using those styles so they might still be used in the future by the application. In a sense, a style element can be left in the DOM because it doesn't matter for the application all that much if it's there is there are elements matching the selectors contained in it. It will just "do nothing" but there is no big harm in that.

[tounsoo]

Gotcha. I expected so too but wanted to confirm since the doc didn't mention it. Thank you!