DOM Diffing Specification Concept

concept.js

// Create virtual document and documentElement.
const vdoc = document.createVirtualDocument();
const root = vdoc.createDocumentElement('html');
// <template/> tags should be able to be converted as well.
const someTemplate = document.querySelector('template#some-template');

// Add some SVG.
root.appendChild(vdoc.createElement({
  nodeName: 'svg',
  namespaceURI: 'http://www.w3.org/2000/svg',
}));

// Add some HTML.
root.appendChild(vdoc.createElement({
  nodeName: 'div',
  attributes: {
    style: `
      color: red;
    `
  },
  // While this isn't very web-like, it's pretty darn handy.
  childNodes: vdoc.parse`
    <span>Wouldn't it be nice to stay together.</span>
    <p>In a world where template literals and html parsing get along</p>
  `
}));

// Convert a <template /> to Virtual DOM. 
// Per: https://github.com/whatwg/html/issues/2254
root.appendChild(someTemplate.parse(withSomeData));

// Compare to a connected DOM Node and generate a set of mutation patches.
const { documentElement } = document;
const patcheset = root.compareNode(documentElement);

// Take the list of changes and apply to the DOM.
documentElement.applyPatcheset(patcheset);