Search code examples
javascriptjsxappendchildstenciljs

Is it possible to append JSX at runtime?

I have a stencil component that needs to append a child to a slotted node. Currently I do it like this:

const x = document.createElemet('x');
slotted.appendChild(x);

But I want to do something like this:

const xJsx = (<x></x>);
slotted.appendChild(xJsx);

The latter won't work because appendChild expects an Node, HTMLElement or DocumentFragement but is there a way to convert the JSX and append it at runtime using stencil?

Solution

  • Generally no you can't

    To elaborate:

    JSX is just a syntax, it only exists when you are at an editor writting code, it helps you write this specifc language which is easy to understand by human and later can be translated to javascript and html tags.

    When you say runtime, you are refering to browser's javascript runtime, browser's JS engine don't know what is JSX. As a result it doesn't work.

    Now here's what babel come to the play: it translates your JSX syntax code into javascript that browser support. And it happens in build time. (you prebuild it)

    The reason I said "Genrally" is, no one stops a person try to use babel to transpile JSX in browser with some hack... however I personally wouldn't recommand it since it's very inefficient and need a lot of work to have it working