diff --git a/compat/src/portals.js b/compat/src/portals.js index 2e126f9076..f62b232ec8 100644 --- a/compat/src/portals.js +++ b/compat/src/portals.js @@ -47,6 +47,7 @@ function Portal(props) { childNodes: [], _children: { _mask: root._mask }, contains: () => true, + namespaceURI: container.namespaceURI, insertBefore(child, before) { this.childNodes.push(child); _this._container.insertBefore(child, before); diff --git a/compat/test/browser/portals.test.js b/compat/test/browser/portals.test.js index 7c8a308d56..1ab4419129 100644 --- a/compat/test/browser/portals.test.js +++ b/compat/test/browser/portals.test.js @@ -874,4 +874,35 @@ describe('Portal', () => { 'Portal' ]); }); + + // #4992 + it('should maintain SVG namespace when rendering through a portal', () => { + const svgRoot = document.createElementNS( + 'http://www.w3.org/2000/svg', + 'svg' + ); + document.body.appendChild(svgRoot); + + function App() { + return ( + + + + {createPortal( + + + , + svgRoot + )} + + + ); + } + + render(, scratch); + + const portalG = svgRoot.querySelector('g#test-portal'); + expect(portalG.namespaceURI).to.equal('http://www.w3.org/2000/svg'); + expect(portalG.constructor.name).to.equal('SVGGElement'); + }); });