👋 hi from Recharts!

• Check if updating to the latest Preact version resolves the issue: yes, observed on v10.28.2

Describe the bug

When rendering SVG elements using createPortal, Preact loses the SVG namespace context and renders SVG elements in xhtml context which means they won't render in browser.

To Reproduce

https://stackblitz.com/edit/createportal-svg-preact?file=src%2Fapp.jsx,src%2Fmain.jsx,package.json&terminal=dev

Steps to reproduce the behavior:

1. Open stackblitz link, if you see two rectangles then it works, if you see one rectangle then it doesn't
2. Open devtools, inspect the two <rect> and run console.log({ namespaceURI: $0.namespaceURI, constructorName: $0.constructor.name })

The visible rectangle has { namespaceURI: "http://www.w3.org/2000/svg", constructorName: "SVGGElement" },

the invisible rectangle (inside the <g> portal) reports { namespaceURI: "http://www.w3.org/1999/xhtml", constructorName: "HTMLUnknownElement" } and does not render in browser.

Expected behavior

The same example in React: https://stackblitz.com/edit/createportal-svg-react?file=src%2FApp.jsx,src%2Fmain.jsx&terminal=dev

{ namespaceURI: "http://www.w3.org/2000/svg", constructorName: "SVGGElement" } on both rectangles.

I discovered this when investigating recharts/recharts#6857 but turns out we can reproduce this even without Recharts in the way.

If I'm doing something improperly please let me know, we can release this as a patch in Recharts if there is a workaround - I couldn't find one (other than "don't use portals").

Thanks!