How do I display custom element with IncrementalDOM?
Incremental DOM is great library to build dynamic DOM tree.
If you want to build DOM tree contains custom tags, you need to call IncrementalDOM.skip() to skip patching DOM elements inside custom element.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="node_modules/incremental-dom/dist/incremental-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script>
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 container = document.getElementById('container');
for (let i=0; i<3; ++i) {
IncrementalDOM.patch(container, function () {
IncrementalDOM.elementOpen('x-bar');
IncrementalDOM.skip();
IncrementalDOM.elementClose('x-bar');
});
}
</script>
</body>
</html>