This threw me off too. I was expecting createElement(Fragment, {}, ...nodes) treatment for cases like this given the positions will be static and keying is known to be unnecessary up-front.

I’d actually thought that this was one of the main selling-points of htm — that the explicit boundaries of the template obviated the need for explicit fragments within the string content — but it seems I misinterpreted the meaning of the “Multiple root element (fragments)” bullet point in the readme section describing improvements over JSX.

Hiya! Multiple roots returns an Array, because that's the easiest and most efficient solution across all frameworks:

const root = html`
  <h1>Quiz</h1>
  ${entriesUi}
  <hr />
  <${Summary} entries=${entries} />
`;

console.log(root);
[<h1>Quiz</h1>, entriesUi, <hr />, <Summary ../>]

It's not necessary to use a Fragment for this, because this is semantically an index-ordered list of children. It's best represented as an Array, because there is no useful key that could be produced for the items.

React's "key" warning is only a high-level generalized piece of guidance, and it does not apply to auto-generated lists of items for which there is no viable unique key. I have a StackOverflow post that explains this more in-depth, but the gist is that this advice tends to cause people to use index keys, which is extremely harmful to diffing. At best, index keys just duplicate the behavior of unkeyed homogenous lists. In all other cases, they cause shifted and conditional items to be remounted on every render.

Was the main issue here that React displayed the questionable warning, or is there a case I'm not aware of where this actually prevents usage?

Was the main issue here that React displayed the questionable warning, or is there a case I'm not aware of where this actually prevents usage?

For me personally, it was that React keeps displaying a warning. Because htm makes multiple root elements so easy, I do it in many components. However, that leads to react throwing lots of warnings in the console, which makes finding things I've actually done wrong more difficult.

Best fix at the moment is to either:

• nest every component in a root <div> (less than ideal when semantic structure matters)
• use @rauschma 's suggestion of <${React.Fragment}>

Being able to tersely type <>...</>, as JSX allows, would be a nice enhancement.