Tengo una aplicación de javascript donde, por algunas razones oscuras, necesito:

• Inyectar estilos en mi encabezado html
• Elimine estos estilos de mi encabezado html en una etapa posterior

Mi configuración simplificada que tengo ahora es algo como esto...

Inyectando la etiqueta <style ...> :

 const css = ` * { outline: 2px dashed lime; } `; const styleEl = document.createElement('style'); styleEl.id = 'myid'; document.head.appendChild(styleEl); styleEl.appendChild(document.createTextNode(css));

Y en otro momento quiero eliminar esos estilos nuevamente, usando la identificación que asigné para identificar la etiqueta <style ...> , porque muchos otros nodos de estilo están en la cabeza:

 const styleElement = document.getElementById('myid'); if (styleElement && styleElement.parentNode) styleElement.parentNode.removeChild(styleElement);

Creo que la id en la etiqueta <style ...> no es HTML válido. Pero tampoco puedo pensar en otra forma elegante de resolver esto. No puedo usar estilos en línea en este caso, porque los estilos deberían aplicarse a todo el documento (en realidad, apuntando a un iframe inyectado).

¡Los pensamientos y la ayuda son muy apreciados!