SVG and MathML elements not created with the correct namespace, so not rendered.

[axyl]

Since createElement is used rather than createElementNS with the right namespace, no SVG elements are rendered. Presumably, MathML has the same issue.

Simple example:

<div id="chart"></div>
<script type="module">
  import { reactive, html } from "https://esm.sh/@arrow-js/core";

  const data = reactive({ values: [10, 20, 30] });

  const svg = html`<svg width="100" height="100" viewBox="0 0 100 100">
    ${data.values.map(
      (v, i) =>
        html`<rect
          x="${i * 10}"
          y="${100 - v}"
          width="9"
          height="${v}"
          fill="red"
        ></rect>`,
    )}
  </svg>`;

  svg(document.getElementById("chart"));
</script>

If you change the parent element, the SVG elements will be processed and rendered...

document.getElementById("chart").innerHTML += "";