From 0b19aa6e32e3cf895ea20f896e901b0dd9ed237d Mon Sep 17 00:00:00 2001
From: Tito Bouzout <tito.bouzout@gmail.com>
Date: Mon, 6 Apr 2026 21:12:30 -0300
Subject: [PATCH] align with dom-expressions

---
 CHANGELOG.md                     |  4 ++--
 packages/solid-h/src/index.ts    |  8 ++++++--
 packages/solid-html/src/index.ts |  8 ++++----
 packages/solid-web/src/index.ts  | 17 +++++++++--------
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6845b1605..d9c48dc23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -460,7 +460,7 @@ Example: https://codesandbox.io/s/solid-stale-resource-y3fy4l
 The Babel plugin now allows configuring multiple custom renderers at the same time. The primary case it is so a developer can still lever Solid's optimized DOM compilation while using their custom renderer. To make this work specify the tags each renderer is reponsible for. It will try to resolve them in order.
 
 ```js
-import { HTMLElements, SVGElements } from "solid-js/web";
+import { HTMLElements, SVGElements, MathMLElements } from "solid-js/web";
 let solidConfig = {
   moduleName: "solid-js/web",
   // @ts-ignore
@@ -469,7 +469,7 @@ let solidConfig = {
     {
       name: "dom",
       moduleName: "solid-js/web",
-      elements: [...HTMLElements, ...SVGElements]
+      elements: [...HTMLElements, ...SVGElements, ...MathMLElements]
     },
     {
       name: "universal",
diff --git a/packages/solid-h/src/index.ts b/packages/solid-h/src/index.ts
index 803235c65..2f219219f 100644
--- a/packages/solid-h/src/index.ts
+++ b/packages/solid-h/src/index.ts
@@ -6,7 +6,9 @@ import {
   insert,
   createComponent,
   dynamicProperty,
-  SVGElements
+  SVGElements,
+  MathMLElements,
+  Namespaces
 } from "@solidjs/web";
 
 const h: HyperScript = createHyperScript({
@@ -15,7 +17,9 @@ const h: HyperScript = createHyperScript({
   insert,
   createComponent,
   dynamicProperty,
-  SVGElements
+  SVGElements,
+  MathMLElements,
+  Namespaces
 });
 
 export default h;
diff --git a/packages/solid-html/src/index.ts b/packages/solid-html/src/index.ts
index bb2ff0615..7d9b2f73f 100644
--- a/packages/solid-html/src/index.ts
+++ b/packages/solid-html/src/index.ts
@@ -14,11 +14,11 @@ import {
   setAttribute,
   setAttributeNS,
   addEventListener,
-  Properties,
   ChildProperties,
   DelegatedEvents,
   SVGElements,
-  SVGNamespace
+  MathMLElements,
+  Namespaces,
 } from "@solidjs/web";
 
 const html: HTMLTag = createHTML({
@@ -35,11 +35,11 @@ const html: HTMLTag = createHTML({
   setAttribute,
   setAttributeNS,
   addEventListener,
-  Properties,
   ChildProperties,
   DelegatedEvents,
   SVGElements,
-  SVGNamespace
+  MathMLElements,
+  Namespaces,
 });
 
 export default html;
diff --git a/packages/solid-web/src/index.ts b/packages/solid-web/src/index.ts
index d9a1634b7..e23445461 100644
--- a/packages/solid-web/src/index.ts
+++ b/packages/solid-web/src/index.ts
@@ -3,6 +3,8 @@ import {
   insert,
   spread,
   SVGElements,
+  MathMLElements,
+  Namespaces,
   hydrate as hydrateCore,
   render as renderCore
 } from "./client.js";
@@ -47,12 +49,13 @@ export * from "./server-mock.js";
 
 export const isServer: boolean = false;
 export const isDev: boolean = "_SOLID_DEV_" as unknown as boolean;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 
-function createElement(tagName: string, isSVG = false, is = undefined): HTMLElement | SVGElement {
-  return isSVG
-    ? document.createElementNS(SVG_NAMESPACE, tagName)
-    : document.createElement(tagName, { is });
+function createElement(tagName: string, is = undefined): HTMLElement | SVGElement | MathMLElement{
+  return SVGElements.has(tagName)
+    ? document.createElementNS(Namespaces.svg, tagName)
+    : MathMLElements.has(tagName)
+      ? document.createElementNS(Namespaces.mathml, tagName)
+      : document.createElement(tagName, { is });
 }
 
 export const hydrate: typeof hydrateCore = (...args) => {
@@ -144,15 +147,13 @@ export function createDynamic<T extends ValidComponent>(
         return untrack(() => component(props));
 
       case "string":
-        const isSvg = SVGElements.has(component);
         const el = sharedConfig.hydrating
           ? getNextElement()
           : createElement(
               component,
-              isSvg,
               untrack(() => props.is)
             );
-        spread(el, props, isSvg);
+        spread(el, props);
         return el;
 
       default: