Skip to content

Instantly share code, notes, and snippets.

@tokuhirom

tokuhirom/incremental-dom.js

Created June 14, 2016 04:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tokuhirom/bfb7c3eb099aa558f296243288ab88aa to your computer and use it in GitHub Desktop.
Save tokuhirom/bfb7c3eb099aa558f296243288ab88aa to your computer and use it in GitHub Desktop.
Download ZIP
Content disappear after rendering Incremental DOM twice
Raw
incremental-dom.js
<!doctype html>
<html>
<head>
<script type="text/javascript" src="node_modules/incremental-dom/dist/incremental-dom.js"></script>
</head>
<body>
<x-foo></x-foo>
<x-foo></x-foo>
<script>
document.registerElement('x-foo', (function () {
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
console.log('created');
this.update();
};
proto.update = function () {
IncrementalDOM.patch(this, function () {
IncrementalDOM.elementOpen('x-bar');
IncrementalDOM.elementClose('x-bar');
IncrementalDOM.text('heh');
});
};
return {prototype:proto};
})());
document.registerElement('x-bar', (function () {
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
IncrementalDOM.patch(this, function () {
IncrementalDOM.elementOpen('div');
IncrementalDOM.text('hello');
IncrementalDOM.elementClose('div');
});
};
return {prototype:proto};
})());
const elems = document.querySelectorAll('x-foo');
for (let i=0, l=elems.length; i<l; i++) {
elems[i].update();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment