Supongamos el siguiente ejemplo:
let html = `<Parent customAttr={ value }>
<Child className="container" />
</Parent>`;
let div = document.createElement('div');
div.innerHTML = html;
// or
div.insertAdjacentHTML('beforeend', html);
console.log(div);
Al insertar la variable html como HTML innerHTML del div , las primeras letras de los elementos <Parent> y <Child> se ponen en minúsculas, los atributos camelCase se pierden y { value } se envuelve entre comillas dobles.
¿Es posible y cómo mantener todo sin estos cambios al insertar como innerHTML ?
¿Qué sucede exactamente cuando establece el valor de innerHTML? Al hacerlo, el agente de usuario debe seguir estos pasos:
El valor especificado se analiza como HTML o XML (según el tipo de documento ), lo que da como resultado un objeto DocumentFragment que representa el nuevo conjunto de nodejs DOM para los nuevos elementos. Si el elemento cuyo contenido se está reemplazando es un elemento, entonces el atributo de contenido del elemento se reemplaza con el nuevo DocumentFragment creado en el paso 1. Para todos los demás elementos, el elemento los contenidos se reemplazan con los nodejs en el nuevo DocumentFragment.
entonces no puedes hacer lo que quieras con innerHtml
Simplemente puede agregar contenido al elemento.
div.innerHTML += html