Lo que estoy tratando de hacer:
¿Cómo hago la serialización ahora?
element.outerHTML en un elemento contenedornew XMLSerializer().serializeToString(element) con el mismo resultadoLa cuestión
Cuando serializo nodos de style que contienen el css como:
.a > .b { color: red }De hecho, se serializan como
.a > .b { color: red }Que no es un CSS válido y, por lo tanto, no se analiza correctamente.
El problema con el signo mayor es el único que observo, pero me hace preguntarme acerca de otros posibles problemas de serialización.
Pregunta : ¿Cómo puedo serializar los nodos de estilo de una manera que no rompa el CSS en ellos?
Entonces parece que esto tiene que ver con la creación dinámica del nodo de estilo en un nuevo documento.
La reproducción más sencilla es la siguiente:
const doc = new Document() const style = doc.createElement('style') style.textContent = '.a>.b { color: red; }' console.log(style.outerHTML) Lo que produce <style>.a>.b {color:red}</style>
Parece que ser parte de un documento renderizado activamente o simplemente agregarse a un documento y no solo crearse con él tiene algún efecto secundario en el nodo de estilo, lo que hace que se serialice correctamente. Así que ahora hago lo siguiente como solución alternativa, que es un poco feo pero funciona:
const doc = new DOMParser().parseFromString('<html><head></head><body></body></html>', 'text/html') const style = doc.createElement('style') style.textContent = '.a>.b { color: red; }' doc.body.append(style) console.log(style.outerHTML) doc.body.removeChild(style) Lo que produce un <style>.a>.b { color: red; }</style>
Ahora esto resuelve mi problema, pero todavía me gustaría entender qué está sucediendo aquí con más detalle (por ejemplo, cuál es el efecto secundario exactamente y cómo/cuándo se desencadena), ¡así que agradecería los comentarios al respecto!