Estoy tratando de crear una aplicación simple con la biblioteca de interfaz de usuario de componentes Web y React. Esta biblioteca utiliza named slots para llenar áreas en el componente. Al intentar usar una ranura con nombre como esta en mi plantilla:
<div slot="app-content"></div>
La salida renderizada no tiene la ranura: <div></div>
Reproducción mínima: simplemente agregue <div slot="mySlot" id="mySlottedDiv"></div> a la plantilla de un componente de reacción. Luego inspeccione el HTML resultante y vea que se omite el atributo slot .
Aquí hay un ejemplo de una aplicación de este tipo: https://codesandbox.io/s/vivid-spring-hack-react-example-forked-yu9dss?file=/index.js
En este archivo, puede ver que estoy configurando un div con slot="app-content" pero el HTML resultante elimina el atributo del div , lo que me impide usar la API del componente web.
¿Hay alguna manera de forzar la reacción para NO eliminar los atributos de un elemento? ¿Es esto un error en reaccionar?
Ok, aparentemente esto funciona en la versión de reacción 16 y superior. Aquí está la publicación del blog que explica eso: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html En mi caso, se soluciona actualizando reaccionar.
Parece que hay algunos problemas abiertos y cerrados en algunas bibliotecas que intentan integrarse con reaccionar para admitir el atributo de slot correctamente.
Esta parece ser una solución que elude los atributos de la lista blanca de reacción:
function slot(name = "") { return { ref: (e) => e.setAttribute("slot", name) }; }y luego renderizar:
<div {...slot("app-content")}>Esto parece funcionar.
Aquí hay más información: https://github.com/skatejs/skatejs/issues/1096 https://codesandbox.io/s/vivid-spring-hack-react-example-forked-nik1hs?file=/index .js