loaded
loaded es un gancho de ciclo de vida que se activa después de que se hayan cargado todas las dependencias en la plantilla del componente. Esta etapa garantiza que todas las dependencias se hayan cargado antes de renderizar el componente. En este momento, es apropiado eliminar los estilos de carga añadidos en la etapa ready.
Código de ejemplo
<div id="logger">-</div>
<div style="color:red;">loaded : <span id="loaded"></span></div>
<script>
setTimeout(()=>{
const ele = document.createElement('test-loaded');
},500);
</script>
<div id="logger">-</div>
<div style="color:red;">loaded : <span id="loaded"></span></div>
<script>
setTimeout(()=>{
const ele = document.createElement('test-loaded');
},500);
</script>
<template component>
<l-m src="https://ofajs.github.io/ofa-v4-docs/docs/publics/comps/punch-logo.html"></l-m>
<punch-logo></punch-logo>
<script>
let count = 0;
export default {
tag: "test-loaded",
ready(){
$("#loaded").push(`<div>ready - ${this.shadow.$('l-m').ele.loaded}</div>`);
},
loaded(){
count++;
$("#logger").text = count;
$("#loaded").push(`<div>loaded - ${this.shadow.$('l-m').ele.loaded}</div>`);
}
};
</script>
</template>
Diagrama del ciclo de vida
