En una devolución de llamada fetch() DOMContentLoaded , se extrae un fragmento de HTML del servidor que contiene una etiqueta <script src="..."> entre otras cosas, por ejemplo, un elemento de enlace CSS. Este fragmento se envuelve primero en un div recién creado con div.innerHTML = snippet y luego se agrega al elemento head con

 document.head.append(...div.childNodes)

Como resultado tenemos:

• Todos los elementos del fragmento están en la head , como se puede ver con las herramientas de desarrollo del navegador.
• El CSS se aplica a la página.
• Pero : el script ni siquiera está cargado, como se puede ver en la pestaña de red de las herramientas de desarrollo del navegador.

Pregunta: ¿por qué no se carga ni ejecuta el script? ¿Es esto alguna medida de seguridad? Una forma de ejecutar el script es esta:

 document.head.querySelectorAll('script').forEach((scriptEl) => { const newScriptEl = document.createElement('script'); scriptEl.getAttributeNames().forEach((name) => { newScriptEl[name] = scriptEl.getAttribute(name); }); scriptEl.replaceWith(newScriptEl); });

es decir, los elementos del guión recién creados y reemplazados en la head hacen el truco. Curiosamente scriptEl.replaceWith(scriptEl.cloneNode(true)) no funciona. ¿Es posible cargar el fragmento y agregarlo al head de modo que los scripts de la etiqueta del script se ejecuten sin este paso adicional?