Vue version

3.2.27

Link to minimal reproduction

https://sfc.vuejs.org/#eNrlV71u2zAQfhVWixO0lpCikyEL6JYhXoqiXTRUlmiLgUgKJO0MhsdOfcs+SY5SYlvkMbGTDPlZDN4v7+476wM30fe2jdcrGk2iVJeKtYZoalZtlgvGW6kM2RBFF2RLFkpyMgLXUS5yUUqhDeF6SabWfja6pE0jyW+pmurT6DwXadKng0QgGMrbpjAUJELS+iL7QUVFFRNLMitMPbsiN8zU5NeKpglYOy8Ohu5kz6aYN330nax2QidWB6JV6K6FvcbqlLxxdFYrs7M0gV/fwrICLAyN+RyMmQdjzpEYUPllpVxkX8Eihk0lTlegGPSNjEFmU+fSI4Kw2bGsRPo6stDQyGz4Nz8cvP7/+4t4Y1ClfKGKEqnrwkv8QL1eDhx9HF8M2+GYrbRf2KdtL76NL4AAEn5i81hevAXsz/GRtv05s34zK/VxoQ9DZM87CgPhntvCXJiWsqIZE4Kqy5+zqzTp5D09Vmzdp16Pa8ObaR7d3/sHCHd/wYA6B3viTMSfB0aZIcIMbxNOluGVwIgSoUkMEgcQBw63XXdnHnH3p4PtyhFl4UPByBCnQgwChAZxEgzU50RjaKLfJA+twyEO/gAnbh7+VXzGbL3AE1r082EFY+T4/nb0aXN8pWvx3mHEx35ARjsqAtKwTj2LJJ3l4NEWfYn65+CYF218raWAB+PGuuZ3Bp1HE9JprA6eiVbOo9qYVk+SRC9K+8y81rFUywROsVoJwziNqebjOXzcNVWQuL9/m4tttL0FFv2m3Q==

Steps to reproduce

1. Try rendering any MathML tags.

What is expected?

Vue will properly render MathML like it does with HTML and SVG.

What is actually happening?

Vue ignores MathML and thinks the tags are wrongly configured custom elements.

System Info

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.0
    npm: 9.3.1
  Browsers:
    Firefox: 110.0
    Firefox Developer Edition: 111.0
    Safari: 16.3
    Safari Technology Preview: 16.4

Any additional comments?

MathML is well supported in all browser engines since Chrome 109 (CanIUse MathML) and tremendously useful for any web pages that want to render mathematical formulas.

A quick test showed that React does support MathML and Svelte does not.

Prior issues:

• https://github.com/vuejs/core/issues/3746

There's two layers to this:

1. Vue needs to add these new tags to the list of known elements, now that they have become supported amongst all major browsers.
2. Even without 1. though, I would expect for the MathML to properly render as all of the elements seem to be added to the DOM just as you would expect them to (check the devtools elements tab in the provided playground example).

Oh, we need to use the MathML namespace like we use SVG namespace for SVG elements. That will be a bigger change than initially expected.

Oh, we need to use the MathML namespace like we use SVG namespace for SVG elements. That will be a bigger change than initially expected.

@LinusBorg This is exactly right. I just checked the code and made it work with MathML.

Obviously I don't have tests yet, but if you want I could open a PR and would be happy to finish the MathML support with some guidance.

Edit: Here is the code if you want to check it out -> https://github.com/vuejs/core/compare/main...sto3psl:core:main

Oh, we need to use the MathML namespace like we use SVG namespace for SVG elements. That will be a bigger change than initially expected.

@LinusBorg This is exactly right. I just checked the code and made it work with MathML.

Obviously I don't have tests yet, but if you want I could open a PR and would be happy to finish the MathML support with some guidance.

Edit: Here is the code if you want to check it out -> main...sto3psl:core:main

I took a quick look and it looks great, I think you can add the test and submit a pr to let everyone see how it goes 👍