A picoframework for Web Components
- Eliminates unnecessary ceremony when defining custom elements
- Provides a more functional interface versus vanilla custom element syntax
- Tiny (<700 bytes gzipped)
Your javascript:
var Zr = require('zirconium');
var h = require('hyperscript');
var myWidget = Zr({
name: 'my-widget',
elementDidInit: function(children) {
return h('div', [
h('div', {style: {color: 'red'}, 'hello world'),
h('div', children)
]);
}
});Your markup:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="main.js"></script>
</head>
<body>
<my-widget>
<div>foo</div>
</my-widget>
</body>
</html>