DocumentFragment support about incremental-dom

[sparhami]

The elementOpen function is expected to create an Element, and be inserted as an Element into the parent at the current location. As a result, a DocumentFragment won't work in its place. You can create a nested patch if you need to work with a DocumentFragment however. For example:

function render() {
  elementOpen('div');
  renderFragment();
  elementClose('div');
}

function renderFragment() {
  const frag = patch(document.createDocumentFragment(), () => {
    text('Hello world');
  });

  // Do something with frag.
  // Note: If you try to append the content to the current parent, the content
  // will get removed by `elementClose`, unless you call `skip()`.
} 

const el = document.createElement('div');
patch(el, render);

[sparhami]

Actually, that's also relevant for <template> case:

function renderPart() {
  let el = elementOpen(tpl);
  text('Hello world');
  elementClose(tpl);
}
function tpl () {
  return document.importNode(templateEl.content)
}
let templateEl = document.createElement('template')

let el = document.createElement('div')
patch(el, renderPart);

That gives same error.

So raising back same questions:

• Would that be considered a valuable feature?
• Is there a workaround now for this?

I'm not sure I quite understand the goal of this particular example with respect to rendering "Hello World". Since a template's contents are a tree, it isn't clear to me where in the template's cloned content "Hello world" would be rendered.

If you do need to clone a template as a static subtree, you will want to make sure you also tell Incremental DOM to skip the contents so it does not remove it via a diff. For example:

function renderTemplate(template) {
// Incremental DOM currently requires you have an extra container for rendering
// content into.
const el = elementOpen('div', '<use a key to avoid conflicts>');
// If already rendered the template, skip this part and just reuse it.
if (!el._templateRendered) {
  el.appendChild(document.importNode(template.content, true));
  el._templateRendered = true;
}
// Tell Incremental DOM to ignore all the content of the element so it isn't
// removed.
skip();
elementClose('div');
}

[dy]

Actually, that's also relevant for <template> case:

function renderPart() {
  let el = elementOpen(tpl);
  text('Hello world');
  elementClose(tpl);
}
function tpl () {
  return document.importNode(templateEl.content)
}
let templateEl = document.createElement('template')

let el = document.createElement('div')
patch(el, renderPart);

That gives same error.

So raising back same questions:

• Would that be considered a valuable feature?
• Is there a workaround now for this?

[sgammon]

we use idom with DocumentFragments regularly - am i missing something?

[dy]

Thank you for the solutions, patching internal fragment worked.