Contenido del curso
Estilos con Pseudoelemento Slotted en Componentes Web
¿Cómo usar el pseudoelemento slotted en componentes web?
Para los desarrolladores que buscan manipular el estilo de componentes web, el pseudoelemento slotted es una herramienta poderosa. Se utiliza para agregar estilos a contenido dinámico que se inyecta en las slot de un componente, especialmente cuando se trabaja con Shadow DOM. En esta guía, exploraremos cómo implementarlo eficazmente, asegurando que tus componentes sean reutilizables y estilísticamente flexibles.
¿Qué son las pseudo clases y pseudoelementos?
Antes de sumergirnos en el uso del pseudoelemento slotted, es crucial entender la diferencia entre pseudo clases y pseudoelementos. Ambos son conceptos fundamentales en CSS para aplicar estilos de manera más específica:
:hover o :nth-child.::before, ::after y, por supuesto, ::slotted.Para profundizar en estos conceptos, puedes revisar el curso definitivo de HTML y CSS, donde se discuten detalladamente.
¿Cómo inicializamos el pseudoelemento slotted?
Con el Shadow DOM, podemos mantener encapsulados los estilos de nuestros componentes. Al querer estilizar contenido inyectado en un slot, el pseudoelemento slotted se convierte en nuestra herramienta de elección.
Veamos un ejemplo básico de cómo estructurar tu archivo de estilos cuando tienes un componente que utiliza slot:
::slotted(span) { font-size: 30px; color: red; }
En este ejemplo, todos los elementos span que vienen de fuera del componente y se colocan en slot, adquirirán un tamaño de fuente de 30 píxeles y una coloración roja. Hay que tomar en cuenta que esto es aplicable únicamente dentro de contextos que utilicen Shadow DOM.
¿Cómo proporcionar más especificidad en los estilos?
Para obtener más control sobre cómo se aplica el estilo, podemos enfocarnos en elementos que contengan clases específicas dentro de los slots. Supongamos que tienes un contenido dinámico con una clase llamada texto. Implementar estilos específicos es tan sencillo como:
::slotted(.texto) { color: blue; }
Con esta línea de código, cualquier contenido con la clase texto que se inserte en el slot cambiará su color a azul, otorgándote una mayor flexibilidad al manipular estilos desde fuera del componente.
¿Cuáles son las mejores prácticas al usar slotted?
Desarrollar componentes web eficientes significa facilitar la modificación exterior. Aquí algunas recomendaciones:
¿Cuáles son las limitaciones?
Es fundamental comprender que el pseudoelemento slotted funciona exclusivamente en entornos que emplean Shadow DOM. Por lo tanto, necesitas determinar si es la herramienta adecuada para tu proyecto, teniendo en cuenta esta restricción.
En las próximas lecciones, se explorará cómo habilitar la modificación de estilos de componentes desde el exterior sin sobreescribir estilos globales. Esto se alinea con la promesa del Shadow DOM de mantener la integridad del encapsulamiento de estilos.
Sigue aprendiendo y experimentando con tus componentes web; recuerda que la práctica constante es la clave para dominar estas técnicas.
Julieta Gallego
student
Edgar Lopez Arroyo
student
Nazareno Aznar Altamiranda
student
Javier Fernando Chi Ortiz
student
Pablo Nicolás Alonso
student
John Jairo Rodriguez Rivas
student
Yefri Enmanuel Encarnación Jiménez
student
Roberto Medina
student
Miguel Angel Reyes Moreno
student
Joseph Manuel Salen Pantoja
studentMiguel Angel Reyes Moreno
student
Andres Felipe Pinchao Ramirez
student
Jimmy Buriticá Londoño
student
Andres Menchaca
student
Luis Alejandro Vera Hernandez
student
jefred bedoya
student
Jhoana España Urresty
student
Fernando Campos
student
Jorge Arias Argüelles
student
Rubén Ernesto Aragón Gil
student
Luis David Martinez Espinosa
student::slotted Pseudoelemento que sirve para poder agregar estilos específicos a todo el contenido dinámico que venga desde fuera del componente y se vaya a colocar en las etiquetas slot. . ::slotted(que tipo de etiqueta viene por fuera) {estilos} . Ejemplo ::slotted(span) {} . Si queremos ser más específicos, podemos usar clases: ::slotted(.texto) {} . Beneficio Que los devs que usen el componente puedan modificar las cosas desde fuera sin tener que entrar al componente para cambiar los estilos. . Este pseudoelemento solo va a funcionar cuando tengamos un shadow DOM
Gran Resumen 👍
Diego diciendome en la clase 16 que repita desde cero toda la estructura
Asi mismo me quedé xD
Para los que no quieren repetir pueden verse uncurso de snippets y agregar uno para no repetir el codigo (Aunque al principio sirva para memorizar). les dejo el codigo una vez que encuentren done pegarlo en algun tutorial (Los $1, $2, $3, $4 y $5 son a donde el cursor se va a posicionar al usar el snippet y avanzar con la tecla TAB):
"Web Component body w/ shadow dom": { "prefix": "!prewebcomp", "body": [ "class $1 extends HTMLElement {", " constructor() {", " super();", " this.attachShadow({ mode: 'open' });", " }", " getTemplate() {", " const template = document.createElement('template');", " template.innerHTML = `", " $3", " `;", " return template;", " }", "", " getStyles() {", " return `", " <style>", " $4", " </style>", " `;", " }", "", " render() {", " this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true));", " }", "", " connectedCallback() {", " this.render();", " }", "};", "", "customElements.define('$5', $2);" ], "description": "Web component base w/ shadow dom" }, }
Me encantó, el unico extra que le pondria es en la linea de customElement.define, en el $2 le puedes repetir el $1 para que los dos se escriban a la vez
**Tanto la pseudo Clase :host como el pseudo elemneto ::slotted solo se pueden usar dentro del shadow DOM **
:host hace referencia al host del shadow DOM, por lo que en nuestro caso hace referencia a nuestro custom element.
::slotted hace referencia a los elementos que vienen desde afuera del shadow DOM. Podemos especificar el elemento que queremos aplicar los estilos con (etiquetas/clases/ids)
Hola,
Les dejo la referencia del pseudo-elemento ::sloted
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
Saludos 😃
No estoy seguro de sí veo la diferencia entre host y slotted... ¿host sirve para dar estilos a las etiquetas html y slotted sirve para dar estilos a las etiquetas generadas con JS?
Hola Miguel!
.
Correcto, mediante :host vamos a darle estilo al componente en el Shadow DOM, en cambio con ::slotted vamos a darle estilos al contenido dinámico que encontramos dentro del elemento slot.
.
Si gustas, puedes pasar por la Documentación MDN :D
Gracias por aclarar mi duda y pasar la documentación de MDN :D
MY NOTES FOR PSEUDO CLASS ::SLOTTED :D En esta clase utilizaremos el pseudoelemento sloted que nos ayudara a agregarle estilos especificos a todo el contenido dinámico que venga fuera del componente y se vaya a agregar en todas las etiquetas slot que estan fuera de nuestro componente.
Este elemento solo se va a poder trabajar una vez estemos utilizando el shadow dom
Podremos usar la pseudo clase sloted con el selector * para seleccionar todas las etiquetas que estan por fuera.
::slotted(*){ } ::slotted(span){ font-size:30px; color:red; }
También podremos seleccionar exactamente a cual etiqueta esta por fuera agregarle estilos
::sloted(etiquetaFuera){estilos}
::slotted(span){ font-size:30px; color:red; }
También podremos cambiar los estilos utilizando una clase que tenga la etiqueta
::slotted(.text){ color:blue; }
Si quieren repasar pseudoclases y pseudoelementos, les dejo el link de la clase: https://platzi.com/clases/2008-html-css-2020/31072-pseudo-clases-y-pseudo-elementos/
Repetiremos y repetiremos!!
Este pseudoelemento (::slotted) solo va a funcionar cuando tengamos un shadow DOM
.
:host le dara estilos al componente en el Shadow DOM, ::slotted le dara estilos al contenido dinámico que encontramos dentro del elemento slot.
Estilizado con ::slotted
El pseudoelemento ::slotted permite aplicar estilos al contenido dinámico que se inyecta desde fuera hacia los slot dentro del Shadow DOM de un componente.
Reglas fundamentales
::slotted), al ser un pseudoelemento.Estrategias de aplicación
span) o clases específicas (ej. .texto) para mayor precisión.No entendí muy bien como aplicar esto de los estilos en otro archivo CSS En este ejemplo, ¿como puedo cambiar SOLO, el border-radius: desde un archivo style.css?
product-card.js
getTemplate() { const template = document.createElement("template"); template.innerHTML = ` <main class="container"> <section class="imgBox"> <img src="${ this.img }" alt="Zapatos deportivos para correr color azul"/> </section> <section class="details"> <div class="content"> <h3>${this.title} <span>${this.collection}</span></h3> <p>${this.description}</p> <h4>${this.price}</h4> <button>Comprar</button> </div> </section> </main> ${this.getStyles()} `; return template; } ----------------------------- .container .details button { margin-top: 35px; float: right; padding: 15px 20px; font-size: 16px; color: #fff; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; border-radius: 40px; background-color: #5a6cb2; cursor: pointer; }
style.css
// esto no funiona .container .details button { border-radius: 80px; }
Hola Puedes vincular tu html con los estilos css desde otro archivo usando la siguiente linea de código
<link rel="stylesheet" type="text/css" href="style.css">
Y el uso de clases es lo que te ayuda a poder dar estilo a un elemento específico.
El pseudo elemento que utilizamos para dar estilos a los elementos colocados en slots dentro de nuestro template es ::slotted. Este se aplica únicamente cuando estás utilizando Shadow DOM, permitiendo estilizar contenido externo que se inyecta en las etiquetas slot de tu componente.
¡Cool!