How to append dynamic value? like ``jsx`${value_from_var}```

Last night I wrote

let jsx = htm.bind(h);
let data = '<p>test</p>
let Test =()=> jsx`${data}`
render(Test(), document.querySelector('#content'));

But it just render plain text instead p element. How to solve that? Anyway I’m using ES Module right in the browser without NodeJS nor Bundle system.

[ooling]

It worked, noice!

[rschristian]

it looks mesy :

That looks to be a rendering error in your browser, quite frankly. I’d use something else. It’s like elements are duplicated out of place and without styling. Really odd.

can you just share the code here?

import { html, render, useState } from 'https://cdn.skypack.dev/htm/preact/standalone';

const data = '<h1 style="color: white">Hello World!</h1>';

function App() {
    const [score, setScore] = useState(0);
    const Button = () => html`<button onClick=${() => setScore(score + 1)}>${score}</button>`;
    
    return html`
      ${html([data])}
      <${Button} />
    `;
}

render(html`<${App} />`, document.body);