children Parsed! Native

by WebComponents

HTML

<template id="MY-ELEMENT">
  <img src="" onerror='this.getRootNode().host.parsed("4. img onerror")'>
  <style onload='this.getRootNode().host.parsed("2. style onload")'></style>
</template>

<script>
  console.time("start");
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      const templateById = (id) => document.querySelector(`template[id=${id}]`);
    	const clone = (id) => templateById(id).content.cloneNode(true);
    	super().attachShadow({mode:"open"}).append(clone(this.nodeName));
    }
    connectedCallback() {
     	console.time("parsed");
      setTimeout(() => this.parsed("3. timeout"))
      requestAnimationFrame(() => this.parsed("1. rAF"));
      console.log("%c connectedCallback ","background:green;color:yellow");
    }
    parsed(ref){
     	console.timeLog("start","\t",ref)
     	console.timeLog("parsed","\t",ref)
    }
  });
</script>

<my-element>
  <span></span>
  <b></b>
</my-element>


<!-- note in multiple runs, when rAF chimes in  -->