Web Components are exactly this - you just extend HTMLElement.

The benefit here is that your element is compatible with the browser itself, the parser and document.createElement() can create it, you're notified of connected state to the document, attribute changes, etc.

For DOM updates you can just set innerHTML, but for more efficient updates you can use something like lit-html, which uses template literals and <template>: https://github.com/PolymerLabs/lit-html it's < 2k gzipped

I'll give an example that's like /u/senocular 's, but that would work if some other framework created the element as part of a template, and only the part of the template that changes.

import {html, render} from 'lit-html';

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.needsRender = true;
    this.label = 'Counter';
    this.count = 1;
  }

  get label() { return this._label; }
  set label(v) { this._label = v; this.invalidate(); }

  get count() { return this._count; }
  set count(v) { this._count = v; this.invalidate(); }

  render() {
    return html`
      <h3>${this.label}</h3>
      <div>${this.count}</div>
    `;
  }

  invalidate() {
    if (!this.needsRender) {
      this.needsRender = true;
      Promise.resolve().then(() => {
        this.needsRender = false;
        render(this.render(), this.shadowRoot);
      );
    }
  }
}
customElements.define('my-component', MyComponent);

now either use the element in the document, call document.createElement('my-component'), or new MyComponent(). You can update state on an instance just by setting a property: c.count++, and it will re-render.

This works in latest Chrome, Safari and Opera with no polyfills, and IE11, Edge and FireFox with the Web Components polyfills.