A cell that returns an html element shows that element. I’d like a cell that returns an array of elements to render them, instead of
[HTMLSpanElement, HTMLSpanElement, HTMLSpanElement]
Or is there a way that I’m missing to make it easier? The only way that I found is to make a div and appendChild each span.
https://beta.observablehq.com/@forresto/array-of-html-elements-feature-request-meta
A slightly easier way than using the DOM/appendChild API directly would be to do something like:
html`${arrayOfSpans.map(s => s.outerHTML).join('')}`
That would clone the HTML of the elements, but not event handlers etc.
We’re working on it. I quite like the approach of lit-html, which lets you nest templates. Here’s a quick demo of lit-html:
https://beta.observablehq.com/@mbostock/hello-lit-html
That said, I don’t like the extra layer of indirection in lit-html where you have to first create a template and then render it. That’s necessary if you care about maximizing performance, but I’d like to be able to just render the real DOM directly (as html in our standard library does).
We’re also considering ways that Observable could render virtual DOM automatically: if a cell returns virtual DOM, then Observable would diff it with the real DOM to update it. That would potentially be more efficient than requiring cells to produce real DOM, although, browsers do appear to be pretty fast at generating real DOM these days.
@mbostock I’d guess that you’ve already seen this, but just in case you haven’t: https://github.com/patrick-steele-idem/morphdom updates existing DOM with new target (real) DOM using a diff/patch approach.
Embedding DOM elements and arrays within HTML and Markdown tagged template literals has shipped! See examples here:
https://beta.observablehq.com/@mbostock/introduction-to-html