MathML is unsupported

[lukewarlow]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When trying to use MathML in an angular template you get a warning that <math> it's an unrecognised element. If you disable this warning by adding schemas: [NO_ERRORS_SCHEMA] it doesn't render correctly. At first glance they seem correct because the produced elements are in the MathML namespace (something other frameworks can get wrong) but the element's prototype is just Element rather than MathMLElement.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/github-tdmxzz?file=src%2Fmain.ts

Please provide the exception or error you saw

Error in src/main.ts (12:3)
':math:math' is not a known element:
1. If ':math:math' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

### Please provide the environment you discovered this bug in (run `ng version`)

_No response_

### Anything else?

The template I tried is below. 

```html
<math>
  <mfrac>
    <mn>1</mn>
    <msqrt>
      <mn>2</mn>
    </msqrt>
  </mfrac>
</math>

[JoostK]

Interesting, this should work as we do parse this as math namespace, but then fail to validate it correctly.

[lukewarlow]

Intersting, this should work as we do parse this as math namespace, but then fail to validate it correctly.

Yeah, there's definitely some level of support for it, the namespace appears correct but then it seems to get the prototype wrong (not even sure how that's possible?). As a guess it's not using createElementNS(), it's doing something else.

[JeanMeche]

Yeah the compiler output clearly has the MathML support in it.

The DomRenderer relies on createElementNS() but it looks like the namespace is wrong.

angular/packages/platform-browser/src/dom/dom_renderer.ts

Line 38 in bf25dfa

'math': 'http://www.w3.org/1998/MathML/',

It should be http://www.w3.org/1998/Math/MathML per this

[JeanMeche]

With #55622 we'll at least get the support for MathML but it will still require NO_ERRORS_SCHEMA .

[JoostK]

With #55622 we'll at least get the support for MathML but it will still require NO_ERRORS_SCHEMA .

Yeah that error is because DomSchemaChecker is looking up the definition using the prefixed tagname :math:math which isn't present, as it only contains non-prefixed tagnames.

We should ideally have a branded type for those prefixed tag names, that will likely expose some inconsistencies.

[lukewarlow]

@JeanMeche great catch! I was just helping someone else with a similar issue where createElementNS was returning an Element and it was an invalid namespace which brought me back here, you're one step ahead though

[lukewarlow]

Would be good to reopen this issue until #55622 is merged (or go ahead and merge that as it's approved)

[JeanMeche]

@lukewarlow Yes, we're looking at landing this "fix" into 17.3 and the upcomming 18.0 !

[lukewarlow]

Closing this now that the second PR has been merged.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}