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)

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>
        `)
      }
    }
  })