Convirtiendo un elemento dom a virtual-dom en widgets

Desarrollador
1

Actualmente tengo un elemento DOM que es el resultado de una renderización personalizada de KaTeX.

Se genera de esta manera:

var dom_element = document.createElement("p")
dom_element.innerHTML = "algún texto que contiene latex"
renderMathInElement(dom_element)

En este punto, dom_element contiene el HTML que me gustaría renderizar. Y lo devuelvo de esta manera:

html() {
 return h(algún otro componente ...... , h("div", dom_element))
}

Dado que h espera un VNode, esto genera un error. Intento pasar el HTML interno en su lugar:

html() {
 return h(algún otro componente ...... , h("div", dom_element.innerHTML))
}

Esto renderiza las etiquetas dentro de dom_element.innerHTML como texto plano y no como HTML.

¿Hay alguna solución para esto?

2

Una “widget” (o componente gráfico) casi con toda seguridad no es la herramienta adecuada para esto.

Una “widget” no debería acceder a ninguna otra información que no se le proporcione explícitamente a través de args y solo debería preocuparse por lo que sucede dentro de sí misma y, como mucho, enviar acciones de vuelta hacia arriba. No debería involucrarse en el DOM en ningún otro lugar.

Sería mejor usar un Componente, en mi humilde opinión.

¿Hay alguna razón por la que no puedas encontrar una función de JavaScript que procese el LaTeX, incluido el material matemático, y lo devuelva como HTML que luego puedas renderizar en el componente? Si puedes evitar por completo la manipulación del DOM fuera del framework, esa sería la mejor opción.

3

Mi caso de uso es el siguiente:

Estoy utilizando el componente de etiquetas banners y estaba editando su código fuente. Básicamente, algunas de las descripciones de las etiquetas en mi sitio web incluyen látex. Y quiero renderizarlas correctamente en el banner.

Quería agregar un script a la sección “Head” en el tema personalizado, en lugar de editar el widget. Pero no pude encontrar una manera de saber si el widget ya se cargó, por lo que obtengo un elemento vacío cuando hago document.getElementById en la sección “Head” porque el componente HTML relacionado que muestra la descripción de la etiqueta aún no se ha cargado.

4

No puedes garantizar cuándo se carga un widget o un componente. Sin embargo, puedes realizar el trabajo en un evento de componente como didInsertElement.