can/demo2.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<button id="add">Add one</button>

<script type=module>
var widths = [];
window.WIDTHS = widths;

let MyElement = class extends HTMLElement {
  constructor() {
    super();
  }
  set depth(newDepth) {
      var depth = newDepth - 1;
      var span = document.createElement('span');
      span.textContent = depth;
      this.appendChild(span);

      if(depth > 0) {


          for(var i = 0; i < 10; i++) {
              let child = document.createElement('my-element');
              child.depth = depth;
              this.appendChild(child);
          }

      }
  }
  connectedCallback() {
      widths.push(this.firstChild.offsetWidth);
  }
}
customElements.define('my-element', MyElement);


add.addEventListener('click', () => {
  var t0 = performance.now();
  let el = new MyElement();
  el.depth = 4;
  document.body.appendChild(el);
  var t1 = performance.now();
  console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
});
</script>