tokuhirom
6/14/2016 - 4:59 AM

Content disappear after rendering Incremental DOM twice

Content disappear after rendering Incremental DOM twice

incremental-dom.js
content_copyfile_download
<!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>