Render a custom element to a virtual-dom widget

Usage no npm install needed!

<script type="module">
  import virtualWebcomponent from '';


virtual-webcomponent stability

npm version build status test coverage downloads js-standard-style

This is a very bad idea. Rendering custom elements on the server has proven to be either fragile, slow or clunky so they should be avoided. Don't use this. You have been warned. This has been open sourced for legacy purposes only.

Render a custom element to a virtual-dom widget.


$ npm install virtual-webcomponent


const toWidget = require('virtual-webcomponent')

module.exports = render

function render (h) {
  return h('section.main', [

function createCustomElement () {
  const proto = Object.create(window.HTMLElement.prototype)
  proto.createdCallback = function () {
    this.textContent = 'hello cruel world'
  return proto


vdomWidget = toWidget(customElement)

Takes a custom element prototype and creates a virtual-dom widget. Contains the following mapping of events:

custom-element virtual-dom
.createdCallback() called once on creation
.attachedCallback() .init
.detachedCallback() .destroy
.attributeChangedCallback() .update


react.js is the new jQuery. Everything for the web is starting to be created using this framework, and history has taught us that all frameworks eventually die.

Though most of the efforts around webcomponents have turned out to be not very good (e.g. shadow dom, html imports), custom elements are alright. Just like react custom elements have a concept of lifecycle, only it's not tied to a framework.

By leveraging custom element prototypes and their lifecycle hooks, virtual-dom widgets can be created that act as nodes on a tree. This reduces virtual-dom to glue only, and when something better comes around the components can be easily ported to a new framework. This approach brings a much needed reuse / upgrade path to the browser, allowing developers to break free from the endless rewriting and relearning whenever a new framework comes around.

See Also