fix(component): propagate SVG namespace through components (#10916)

Author: brookslybrand

packages/component/.changes/patch.fix-svg-namespace-in-components.md

@@ -0,0 +1,3 @@
+Fix SVG namespace propagation through components
+
+Components rendered inside `<svg>` elements now correctly create SVG elements instead of HTML elements.

packages/component/src/lib/vdom.test.tsx

@@ -192,6 +192,36 @@ describe('vnode rendering', () => {
       // Attribute should remain correct post-hydration
       expect(postPath.getAttribute('stroke-linecap')).toBe('round')
     })
+
+    it('propagates SVG namespace through components', () => {
+      let container = document.createElement('div')
+      let root = createRoot(container)
+
+      function SvgGroup({ href, children }: { href: string; children?: RemixNode }) {
+        return () => <g href={href}>{children}</g>
+      }
+
+      root.render(
+        <svg width="100" height="100">
+          <SvgGroup href="/test">
+            <path id="p" />
+          </SvgGroup>
+        </svg>,
+      )
+
+      let svg = container.querySelector('svg')
+      let group = container.querySelector('g')
+      let path = container.querySelector('path')
+
+      invariant(svg instanceof SVGSVGElement)
+      invariant(group instanceof SVGGElement)
+      invariant(path instanceof SVGPathElement)
+
+      // All elements should have SVG namespace
+      expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg')
+      expect(group.namespaceURI).toBe('http://www.w3.org/2000/svg')
+      expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    })
   })
 
   describe('inserts', () => {

packages/component/src/lib/vdom.ts

@@ -773,9 +773,8 @@ function insert(
   cursor?: Node | null,
 ): Node | null | undefined {
   node._parent = vParent // set parent for initial render context lookups
-  if (isHostNode(node)) {
-    node._svg = getSvgContext(vParent, node.type)
-  }
+  node._svg = getSvgContext(vParent, node.type)
+
   cursor = skipComments(cursor ?? null)
 
   let doInsert = anchor