Native virtual dom?

native-virtual-dom.js

// what if this was something browsers just gave us?
const { vdom } = document;

// this is same idea as React.createElement
// or any of the other similar appraoches
const newVirtualDom = vdom('div', {className: 'some-class'}, [
  vdom('p', null, 'hi')
])

// if preferred, someone could easily use JSX and precompile it
// const newVirtualDom = (
//   <div className='some-class'>
//     <p>hi</p>
//   </div>
// )

// then adding a `mutateTo` method to Element.
document.body.mutateTo(newVirtualDom)

https://github.com/choojs/nanomorph + https://github.com/shama/bel basically do this. It even supports sibling reordering if the elements have an id attribute.

Agreed though, if especially if there was some kind of native API speedup that could be provided by shipping a mutateTo API.

What do you think about this?:
`
document.rendered = false;
document.rendered = true;
document.render();
document.render(false);
document.render(true);

document.getElementById("id").rendered = false;
`

Working like documentFragment or display: none. Element is visible but frozen.
Before set element.render(true);, element behavior like maybe body.appendChild(element); or element.style.display = "block";.

Does it contribute to the topic?

customElements.define('my-list', class extends HTMLElement {
    static get observedAttributes() { return ['header', 'items'] }
    constructor () {
      super()
      this.root = this.attachShadow({mode: 'open'})
      this.header = ''
      this.items = []
      this.isRender = false
    }
    connectedCallback() {
      this.isRender = true
      this.render()
    }
    attributeChangedCallback(name, oldValue, newValue) {
      switch (name) {
        case 'header' : {
          this.header = newValue
          break
        }
        case 'items' : {
          this.items = newValue.split(',')
          break
        }
      }
      this.render()
    }
    render () {
      if (this.isRender) {
        this.root.mutateTo(`
          <h1>${this.header}</h1>
          <ul>
            ${this.items.map((item, key) => `<li key="${key}">${item}</li>`).join('')}
          </ul>
        `)
      }
    }
  })