demo.html

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

<script type=module>
var widths = [];
window.WIDTHS = widths;
let MyElement = class extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    var depth = this.depth - 1;
    var span = document.createElement('span');
    span.textContent = depth;
    this.appendChild(span);

    widths.push(span.offsetWidth);


    if(depth > 0) {


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

        }

    }

  }
  
}
customElements.define('my-element', MyElement);


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