StencilJS and SVG - some SVG elements don't render?

Question

I'm using StencilJS to create a diagram in SVG.

I have a TypeScript function that determines what SVG elements should be included in the SVG, sets the appropriate parameters on those elements, and returns JSX.

When the JSX is rendered on screen, several of the elements are not displayed.

What's odd is that, if I open the console and inspect the elements, I can see that they're all there.

If I copy the SVG element in it's entirety, and paste it into another context - I can see all the elements as I'd expect.

So, I know the elements are "there" in both the returned JSX, and the DOM - it's just that, for some reason, they're not displayed.

In the first screenshot below - you can can see one element that's visible.

In the second screenshot - you can see me highlight another element that's also in the DOM, but is not visible.

You can see that there's no obvious difference (e.g., one's not styled differently). It's just that the browser does not seem to recognize it as a DOM element.

It's as though Stencil takes some of the elements from JSX and inserts them into the DOM, but not others. No errors are displayed anywhere.

Any idea why this happens?

Screenshot 1 - visible element:

Screenshot 2 - "missing" element:

@RobertLongson That seems like a good possibility, except if you look at the two elements I highlighted - they're both the same type of element: `text`. And they both have the exact same properties, and the same parent. But one renders, and one does not. Is that consistent with a namespace issue? — mattstuehler, Apr 08 '20 at 19:07
@RobertLongson Can you tell me a bit more about the namespace issue? What should I look for? — mattstuehler, Apr 08 '20 at 19:47
probably missing slot= attribute to specify what slot the svg should go in. — Leblanc Meneses, Jun 28 '22 at 20:14

StencilJS and SVG - some SVG elements don't render?

0 Answers0