¡Slots, Slots, Slots, Todos!

¿Están listos para hablar sobre slots, slots, slots, todos? Soy Abbe, una ex desarrolladora de React, y cuando comencé a aprender Vue, me pregunté, ¿qué demonios son los slots? Los slots convierten los componentes en envoltorios que mejoran tu contenido dinámico. Así que en lugar de tener que decidir exactamente qué va a hacer tu componente cuando lo escribes y no se le permite hacer nada más, puedes usar un slot para crear un pequeño marcador de posición y pasar cualquier contenido a eso como quieras.

Vamos a comenzar con la especificación de componentes web y luego cómo React, Vue y Angular aprovecharon esa especificación para usar slots en los frameworks. Toda esta información estará disponible para ti después de que termine la charla, así que no tienes que recordar ninguna de las implementaciones. Solo piensa en cómo usar los slots.

Vamos a comenzar con los componentes web. Son parte de la especificación de HTML. Todo lo que estoy a punto de mostrarte está disponible en tu navegador con JavaScript y HTML ahora mismo. Primero, necesitamos una etiqueta template y una etiqueta slot. En mi archivo HTML, tengo una etiqueta template con un ID. Tiene algo de estilo en ella, y luego dentro de un contenedor div, un puñado de slots. Este primer slot es un slot por defecto. No tiene un nombre. El segundo slot está usando el atributo name con el valor title para nombrar el slot title. Dentro de él hay contenido por defecto. Esto es lo que mostraremos si no pasamos nada al slot. Este slot está envuelto en un elemento H2 o de encabezado. Cualquier cosa que pase a ese slot será envuelta en un elemento de encabezado. Dentro de este siguiente slot llamado content, tengo una etiqueta de párrafo. Cualquier cosa que pase a ese slot sobrescribirá la etiqueta de párrafo. A continuación, necesitamos un elemento personalizado con el shadow DOM. Estoy usando la API de elementos personalizados para definir un componente llamado shots component. Luego paso el nombre de la clase shots a él. Esto está extendiendo el elemento HTML, así que obtenemos todas las ventajas que obtienes con un elemento HTML básico. Luego estoy dentro del constructor. Estoy obteniendo la etiqueta template por el ID, creando un shadow DOM, que es solo un pequeño DOM encapsulado dentro de tu DOM regular. Dentro de ese shadow DOM, estoy agregando una copia de todo el contenido dentro de esa etiqueta template, y estoy agregando una clase para facilitar el estilo. Voy a llamar al componente. Voy a usar este nombre que pasé al método de definición. En la parte superior de mi archivo HTML, tengo shots component.

Todo el contenido que quiero pasarle está actualmente comentado. No estoy pasando nada a él, y deberíamos ver el contenido por defecto. Deberíamos ver a Sad Little John porque no hay shots, y lo vemos. Como puedes ver, la etiqueta template está montada, pero eso no es lo que se muestra en la página. Esa es nuestra llamada al componente shots. Dentro de la etiqueta template hay un fragmento de documento, y dentro de ese fragmento de documento está todo el contenido que estaba en esa etiqueta template en nuestro archivo HTML. Dentro del componente hay una raíz shadow con todo el contenido que estaba dentro de la etiqueta template.

A continuación, usemos un atributo de slot para pasar algo de contenido a nuestros slots. Este primer elemento tiene un atributo de slot con el valor title, por lo que este contenido debería ir en el slot llamado title. Lo mismo para el resto de los slots nombrados, pero este último no tiene el atributo de slot en él. Todo su contenido irá al slot por defecto. Aunque lo estoy pasando al final, el slot por defecto está en la parte superior, así que espero ver shots, shots, shots sobre Happy Little John porque ahora tenemos shots, y lo vemos. Dentro de mi componente ahora que estoy pasando algo de contenido, hay botones de slot.

Al presionar este botón me llevará al slot al que se está poniendo ese contenido, y si expando el slot, entonces obtengo un botón de revelación que me lleva de regreso al slot al que se está pasando. Así que, hablamos sobre el slot y el botón de revelación. Vimos que la etiqueta template está montada. Tiene un fragmento de documento en ella. La etiqueta template en sí no se muestra. Hay una raíz shadow, y dentro de ella las etiquetas de slot están montadas, y ahora necesitamos hablar sobre cómo el shadow DOM afecta al CSS.

Entonces, puede que hayas notado que Happy Little John es un poco más grande que Sad Little John. Esto se debe a que está recibiendo una declaración de ancho de 500 píxeles de mi hoja de estilo. El contenido que paso fuera de la etiqueta template tiene acceso a/está afectado por mi hoja de estilo. Entonces, ¿qué pasa si comento eso e importo mi hoja de estilo en la parte superior de mi etiqueta template? Todavía vamos a obtener al pequeño Sad Little John porque todavía está recibiendo la declaración de 300 píxeles de mi etiqueta de estilo justo aquí.

Esto es más específico que esa declaración de importación. Entonces, si comento eso, obtenemos al gran Sad Little John. Todo esto es para decir que esta es probablemente la mayor queja sobre cómo se implementó la especificación de componentes web, pero si revisas el blog completo, enlazo a la historia del tipo que logró que Google y Apple acordaran esta especificación, y todos sabemos que se tuvieron que hacer compromisos. Ahora hablemos de otros frameworks. React no usa slots. Vue y Angular sí usan slots.

Extienden la especificación de componentes web, y no montan las etiquetas de slot y template. No quieren que eso desordene tu DOM. Cuando digo que React no usa slots, me refiero a que si quieres pasar HTML o JSX a un componente, usas la prop children. Le dices al componente dónde poner esa prop children, y luego nunca vuelves a tocar los children nuevamente. Están los documentos para respaldar eso. Vue tiene una guía completa de slots.

Comencemos con cómo usar los slots por defecto. Entonces, tengo el componente slots default, y dentro del componente, tengo un slot por defecto. No tiene un nombre. Alrededor del slot por defecto, tengo una imagen de una ventana y una imagen de una pared, y mi contenido por defecto para este slot por defecto es Confuse Little John. Está confundido porque no hay personas en el club. Así que, pongamos algunas personas en el club para él.

Exactamente como hicimos con los componentes web, solo voy a pasar algún contenido como un hijo de mi componente, y eso terminará en el slot por defecto. Vamos a tener personas en el club. Al igual que los componentes web, también puedes usar slots nombrados y slots por defecto y nombrados juntos. Así que, comencemos con mi contenido por defecto. Mi componente de slots nombrados tiene un slot llamado window y un slot llamado wall, y esta vez en lugar de una imagen, el contenido por defecto es texto.

Dentro de nuestro slot por defecto, tenemos al mismo Confuse Little John, pero ahora está más confundido porque ni siquiera hay un club. Démosle un club. Accedemos a los slots nombrados en Vue usando la etiqueta template y el signo de Octavethorper o almohadilla y el nombre del slot. Así que, esta vez voy a pasar la ventana y la pared directamente a esos slots nombrados. Así que, Little John todavía está un poco confundido, pero podemos conseguirle gente para su club. Al igual que los componentes web, solo puedes pasar algún contenido, y eso terminará en el slot por defecto.

Entonces, a pesar de que estoy pasando a las personas fuera del club, sabemos que el slot por defecto está entre la ventana y la pared, por lo que las personas terminarán dentro del club. También tienes la opción de usar la sintaxis de nombrado con un slot por defecto, y su nombre será default. Así que, esto se verá exactamente igual que no envolver ese contenido en una etiqueta template y usar el default. Lo hace.

También podemos crear un slot condicional. Así que, aquí estoy llamando a mi componente de slots condicionales, y usando la etiqueta template y la sintaxis de nombrado y la directiva vif. La directiva vif dice que si me pasas algo y se evalúa como verdadero, montaré este elemento y todos sus hijos. Si se evalúa como falso, no montaré este elemento ni ninguno de sus hijos. Ahora mismo lo tengo codificado como falso, así que sabemos que no se montará nada. No se está pasando nada al slot.

En el div, también estoy usando la directiva vif. No la uses en el slot. Úsala en un contenedor. Estoy accediendo al atributo slots, y específicamente a lo que está sucediendo con el slot club. Esto dice que si se está pasando algo al slot club, entonces monta todo. Si no se está pasando nada al slot club, no montes nada. Básicamente, si hay personas en el club, ni siquiera quiero el club. Ahora mismo no estamos pasando personas, así que debería ver una página en blanco, lo cual veo. Si codifico esto como verdadero, entonces estamos pasando personas, así que deberíamos obtener personas y el club, lo cual hacemos.

Dijiste, eso es genial, me encanta, pero ¿y si pudieras acceder al contenido pasado a tu slot en el componente padre cuando usas ese slot? Tengo un componente con slots scoped, y estoy usando la directiva vslot para acceder a las props del slot. ¿Qué son las props del slot? Props pasadas a tus slots. Tengo un slot por defecto aquí, y está recibiendo dos props, number y message. Number viene de mi lógica aquí arriba. Es un conteo de disparos. Message es un mensaje que cambia basado en el conteo de disparos.

También tengo una función que incrementa el conteo de disparos, que está conectada al botón. Si no estuviera pasando nada a este componente, solo vería el botón. Pero en mi componente padre, estoy accediendo a las props del slot, y luego accediendo a las props como propiedades de las props del slot. Debería tener tres filas de texto y un botón que incrementa el número de disparos. Cuando llegas a cinco, estás cortado, levanta las manos, no necesitas más disparos. Cuando usas slots por defecto scoped, tienes que usar la sintaxis de nombrado.

Ahora voy a envolver un slot que es un slot por defecto en un encabezado, y voy a pasar el number a él. Va a obtener el conteo de disparos. Luego tengo un slot llamado display que está recibiendo la prop message. Básicamente, Vue necesita saber a qué slot estás accediendo, para saber a qué props tienes acceso. También podemos usar la sintaxis de nombrado para acceder a las props del slot. No tenemos que usar la directiva Vslot en el componente. Podemos usarla en la etiqueta template y acceder a la prop como una propiedad de las props del slot. Debería tener dos filas de texto y el botón esta vez, y lo tengo. Funciona exactamente igual.

No voy a mostrarte el ejemplo de nuevo, porque esto funcionará exactamente igual que las dos últimas veces. No tienes que acceder a las props como una propiedad de las props del slot. Puedes usar la desestructuración de JavaScript para acceder a ellas. Si eres como yo, podrías preferir esto, o cuando tienes objetos anidados, reduce una parte del punto del objeto. Juntando todo esto, podemos resolver un problema que tenía muy a menudo en React. Cuando obtienes un array y quieres mostrarlo en la página, tienes que usar un map para crear todo el JSX. Es un poco diferente cada vez, por lo que no siempre puedes escribir lo mismo. Con Vue y slots, podemos crear un componente de lista dinámica cuyo único trabajo es iterar a través de una lista y mostrarla en la página.

Podemos decidir todos los detalles en el componente padre cuando estamos usando el slot. Mi componente de lista dinámica está tomando un array y montando una lista desordenada en la página. En un elemento de lista, tengo la directiva v4, que crea un iterador para cada elemento en el array. Creará un elemento de lista. Tomará una clave de dentro de ese objeto que estoy mostrando en la página. Tiene un slot llamado item. Estoy pasando cada elemento en el array como una prop a cada slot. En el componente padre, defino el array, que es una lista de shots que el bar podría tener.

Luego decido cómo quiero mostrarlo. Uso mi etiqueta template y la sintaxis de nombrado para acceder a ese item. Luego decido qué propiedades quiero mostrar y cómo, y hago todo el estilo en el componente padre. Así que, deberíamos obtener una hermosa lista de shots. Y lo hacemos. También puedes hacer algo así como lo opuesto donde no renderizas ningún elemento y solo tienes lógica y luego pasas esa lógica a un slot. He visto esto referido como componentes de orden superior así como arquitectura de componentes inteligentes y tontos, y hay una guía completa sobre cómo hacerlo porque ahora tenemos que hablar sobre Angular. Angular tiene slots, pero se llama proyección de contenido. Está basado en el elemento slot, y usas la etiqueta ng-content en su lugar. Así que, cierra este chico malo. Y tenemos un componente de proyección de contenido por defecto. Dentro de él, tengo un slot por defecto, o etiqueta ng-content. Mismo ejemplo.

El pequeño John estaría confundido en el club si no hubiera gente, pero ya estamos pasando gente, así que deberíamos tener gente en el club. Pero, no solo usamos slots por defecto. También podemos usar name slots. Y Angular dijo, sí, y. Hay tantas maneras de nombrar un slot. Ahora mismo, tengo una etiqueta llamada the window que pasará este contenido a un slot. Y para hacer eso, creé dos pequeños componentes con etiquetas ng-content. Y así, eso debería verse igual. Deberíamos tener gente en el club.

Pero, no tienes que usar una etiqueta cuando vas a usar un name slot en Angular. Puedes usar el atributo ng-project as en cualquier elemento. Y coincidirá con el atributo select que está en el slot. Así que, ahora mismo, tengo una cadena, the window, y una cadena, the wall, y eso está siendo coincidido por el atributo ng-project as. Así que, aunque la gente está siendo pasada fuera del club, el slot por defecto está entre la ventana y la pared, así que la gente debería terminar en el club, lo cual hacen.

Pero, eso no es lo único que el atributo ng-project as puede hacer. Puede usar cualquier selector CSS. Cualquier selector CSS. Así que, vamos a empezar con una clase. Y primero, esto va a causar caos porque no he actualizado mi select. Sigue siendo una cadena. Así que, vamos a obtener el contenido por defecto. Vamos a obtener lo que estábamos pasando. Y la gente está fuera del club. Es un caos. Pero, si voy adelante y cambio esto para que sea un selector de clase en su lugar y tal vez recargo duro, sí, obtenemos gente en el club.

Voy a proceder a quitar eso porque el siguiente ejemplo está usando este slot. Este selector está usando un selector CSS que dice que el atributo title debe coincidir con select me. Y en mi componente padre, estoy pasando una etiqueta de párrafo que tiene un atributo title con el valor select me. Así que, aunque lo estamos pasando en la parte superior, debería terminar en la parte inferior, lo cual hace.

Si no tuviera ese selector de slot y simplemente entrara aleatoriamente en el slot por defecto, entonces tendríamos select me en el club con la gente y no queremos eso. No, no. Al igual que en View, también podemos hacer proyección de contenido condicional. Pero esto usa la etiqueta ng-template. Está basado en el elemento template en su lugar. Así que, este va a ser un poco más de un viaje que vamos a emprender juntos.

Como una prop, estoy pasando la cadena para la fuente de mi imagen a donde estoy obteniendo la gente para poner en el club. Y tengo mi componente de proyección de contenido condicional. Está tomando a la gente como una prop y creando refs a estas etiquetas ng-template. Ahora mismo tengo un pequeño john-ng-template y lo estoy colocando directamente en una etiqueta ng-container. Así que, estoy usando el atributo ng-template outlet para tomar esa etiqueta template y montarla dentro de este contenedor. Así que, deberíamos ver gente en el club. Deberíamos ver a un pequeño John confundido, lo cual hacemos.

Si queremos ver gente en el club, entonces vamos a usar este contenedor ng-content que está accediendo a la referencia de la gente en el club. Esta vez estoy usando un atributo vinculado para poder pasar algo de contexto al contenedor, que es la cadena de dónde obtener la gente para poner en el club. Luego estoy pasando eso como otro atributo vinculado a mi etiqueta template, que finalmente lo pasa a mi imagen. Así que, deberíamos ver gente en el club, lo cual hacemos. He creado un componente que hace justo eso. Ahora mismo la prop showPeople está configurada en false.

Si subimos aquí, tengo mis mismas dos etiquetas ng-template y esta vez en ng-init, que es después de obtener todas mis props y todo, digo, oye, ¿es showPeople true o false? Ahora mismo es false, así que estamos tomando un contenedor de vista y creando una vista incrustada y pasando la etiqueta Lil Jon ng-template. Esto va a hacer exactamente lo mismo que tener la etiqueta ng-container y usar el atributo ng-template outlet. Deberíamos ver a Confuse Lil Jon. Si queremos ver gente en el club, entonces configuramos showPeople en true.

Ahora, view container createEmbeddedView pasará tanto la etiqueta template como la gente como contexto también. Ahí vamos. Pero espera, hay más. Angular dijo, ¿qué pasaría si te permitiéramos tener un modo de encapsulación de vista que sea literalmente la Shadow DOM API? Tengo un componente final llamado viewEncapsulationMode. Cuando defino mi componente, uso la propiedad encapsulation para seleccionar viewEncapsulationShadowDOM. Deberíamos ver la foto de graduación de Lil Jon, o Lil Lil Jon, si lo prefieres, dentro de un shadow root exactamente como lo habríamos visto en los componentes web. Aquí está su foto de graduación y ahí está dentro de un shadow root. Empieza a pensar con slots.

Aquí hay un código QR para obtener estas diapositivas. Hay formas de contactarme, todos los repositorios que he estado usando como ejemplos, y el blog con toda esta información. Espero que tengas un gran tiempo usando slots.