Better support for templates and/or child elements

[loreanvictor]

Right now, writing a component that handles templates and child elements works as follows:

define('say-hi', () => {
  const tmpl = document.createElement('template')
  tmpl.innerHTML = '<div>Hellow <slot></slot></div>'

  return tmpl.content.cloneNode(true)
})

This is pretty clunky, and it also doesn't support SSR (since the return value is a Node not an SSRTemplate). Perhaps better support for handling templates and child elements can be baked in?

A naive implementation would be to use DOMParser when a string is returned, and if the described node is an HTMLTemplateElement, then use .content.cloneNode(true) to handle slots properly. A similar approach could be used for when a Node is returned, and when an SSRTemplate's .create() method returns a Node.

Note that this might be the scope of helper libraries that allow creating templates. For example, right now rehtm does support templating and child elements quite nicely, but I feel it would be nice to add some more direct support as well (though the performance impact of this should also be analyzed).