Bug in html template literal

[shaun]

Strings interpolated inside an html template literal are not treated as html:

html`<span>${`<b>hello</b>`}</span>`

expected result: hello
actual result: <b>hello</b>

You can verify the expected result in an Observable cell.

My actual use case was to build an html table with rows like:

html`
<table>
${rows.map(({a,b}) => `<tr><td>${a}</td><td>${b}</td></tr>`).join('\n')}
</table>
`

[Alex Garcia]

Hey @shaunlebron !

Dataflow uses htl for the html and svg builtin cells, so the syntax and usage is slightly different than the old html builtin that's currently used on observablehq.com.

So your <b>Hello</b> example is expected behavior. However, to fix your table example, you can do something like this:

rows = [{a: 1, b: 2}, {a:3, b:4}, {a:5, b:6}]

html`
<table>
  ${rows.map(({a,b}) => html`<tr><td>${a}</td><td>${b}</td></tr>`)}
</table>
`

Here, we can return an array of HTML elements (by using html again inside the map function), and htl will expand it (so no need to .join() the final result!).

Also, not sure what you're using the table for, but wanted to point out the Inputs library that is available as the builtin cell Inputs, and more specifically Inputs.table for tables