Support inheriting namespace through portals (#4993)

Author: JoviDeCroock

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);

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 (
+				<svg>
+					<g>
+						<rect width="100" height="100" fill="red" />
+						{createPortal(
+							<g id="test-portal">
+								<rect width="50" height="50" fill="blue" />
+							</g>,
+							svgRoot
+						)}
+					</g>
+				</svg>
+			);
+		}
+
+		render(<App />, 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');
+	});
 });