virtual-webcomponent

virtual-webcomponent

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.

Installation

$ npm install virtual-webcomponent

Usage

const toWidget = require('virtual-webcomponent')

module.exports = render

function render (h) {
  return h('section.main', [
    toWidget(createCustomElement())
  ])
}

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

API

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

Rant

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

• virtual-dom
• virtual-dom-stream
• virtual-html
• virtual-widget

License

MIT