Remove <template> mechanism

[dascritch]

It seemed a good idea, using a standard system. But in fact,

1. we wait for the DOM to be ready
2. we populate a <template> by writing its innerHTML,
3. Then, for each component, we read the <template> innerHTML to write the shadowRoot via innerHTML.

Even if it was supposed to be done like that per standards, as our webcomponent is not supposed to overcloog the hosting pages, or sharing with other tier code that need its template, and we may create a lot of bottlenecking operations...

Let's remove it, we will also remove the unuseful DOMContentLoaded stop, so the paint operations will occur really sooner.

[dascritch]

Results are completely explosive. On my website (one <cpu-audio> in the front page, one <cpu-controller> in header) :

metric	before	after
build size	48781	48596
LightHouse perf on cpu.pm	76	92
First Contentful Paint	1,1 s	1.0 s
Speed Index	1,6 s	1.2 s
Largest Contentful Paint	2,9 s	2.8 s
Time to Interactive	2,7 s	2.2 s
Total Blocking Time	800 ms	330ms
Cumulative Layout Shift	0,147	0.144

So, yes, 3 writes and 2 read via innerHTML is really costly... instead of two writes only

[dascritch]

Can do a bit better

[dascritch]

No , no async (async () =>{ /* window.custom... */ } , this is a wrong idea, as we need CpuControllerElement instancied after CpuAudioElement

[dascritch]

Another one for the screenshot :