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', [
toWidget(createCustomElement())
])
}
function createCustomElement () {
const proto = Object.create(window.HTMLElement.prototype)
proto.createdCallback = function () {
this.textContent = 'hello cruel world'
}
return proto
}
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.