datastar
datastar copied to clipboard
delaneyj
Inserting elements into SVG doesn't work, wrong NamespaceURI
Bug Report
If you insert any element (via @patch for example) anywhere inside an svg tag, it shows up in the DOM inspector, but it isn't rendered, because the namespaceURI of the element is incorrect ("http://www.w3.org/1999/xhtml" instead of "http://www.w3.org/2000/svg").
My guess is that datastar always uses document.createElement, but it would have to use document.createElementNS for anything that goes inside SVG.
Is there anything I can do locally to fix this, or would I have to wait for a patch in datastar proper?
Here is a reproduction of it, after 2 seconds, the rectangle is patched and disappears, because the namespace is incorrect. https://codepen.io/cpuser543/pen/jEWRgxv. After the rectangle disappears, go to the inspector, select the rectangle, and look at its namespaceURI
Thank you for a great library!
Datastar Version
v1.0.0-RC.6
I’m not sure we can do anything about this, but I’ll leave it to @jmstevers to respond in full.
@ecraven please see the SVG morphing example if you haven’t already.
I don't think this is generally solveable as html and svg elements share names (e.g. <a> and <a>) and the new elements that are being patched in are passed into each patch mode and the namespace of an element is immutable. It may be possible to just check if parentElement is svg namespace then recreate all the new elements with svg namespace but im not sure if that would work 100% of the time. This would have to work for every patch mode.
well, right now, this means you just can't use datastar to work with SVG (unless you never modify the structure), which is not an ideal situation either :-/ the correct solution is probably what you mentioned, check the parent element's namespace (that might suffice, maybe there's no need to go up and search for an explicit svg element). I'm not sure whether html can be nested inside svg again, etc...
it would be nice if this could be fixed in some way :-/
