Return DocumentFragment from Handlebars plugin

[mbland]

More accurately, return a DocumentFragment from each template function generated by the Handlebars plugin:

Individual elements within the DocumentFragment can be accessed via its .children property. Passing the DocumentFragment to appendChild() will append all of its elements at once, detaching them from the fragment.

  import Template from './foobar.hbs'

  const t = Template({ some: 'data' })
  const [firstChild, secondChild] = t.children
  document.body.appendChild(t)

---

I'm hoping returning the DocumentFragment will eventually help me solve a problem with testing <form> elements attached to DocumentFragments. Some of this weirdness is currently documented in a comment inside the "Request > postForm > succeeds" test in:

• strcalc/src/main/frontend/components/request.test.js

We have to be careful creating the <form>, because form.action
resolves differently depending on how we created it.

Originally I tried creating it using fragment() from
'../test/helpers', which creates elements using a new <template>
containing a DocumentFragment. However, the elements in that
DocumentFragment are in a separate DOM. This caused the
<form action="/fetch"> attribute to be:

• '/fetch' in jsdom
• '' in Chrome
• #{document.location.origin}/fetch in Firefox

Creating a <form> element via document.createElement() as below
causes form.action to become #{document.location.origin}/fetch in
every environment.

On top of that, in the branch in which I'm developing the new Calculator component, I'm submitting the form via HTMLFormElement.requestSubmit(). This works in jsdom, but not in Chrome or Firefox. I'm wondering if the problem is related, and if having the <form> attached to a DocumentFragment is to blame.