Estilos con Pseudoelemento Slotted en Componentes Web
Contenido del curso
Julieta Gallego
Edgar Lopez Arroyo
Nazareno Aznar Altamiranda
Javier Fernando Chi Ortiz
Pablo Nicolás Alonso
John Jairo Rodriguez Rivas
Yefri Enmanuel Encarnación Jiménez
Roberto Medina
Miguel Angel Reyes Moreno
Joseph Manuel Salen Pantoja
Miguel Angel Reyes Moreno
Andres Felipe Pinchao Ramirez
Jimmy Buriticá Londoño
Andres Menchaca
Luis Alejandro Vera Hernandez
Kenneth Angulo L
Kenneth Angulo L
Jefred Bedoya
Jhoana España Urresty
Fernando Campos
Jorge Arias Argüelles
Rubén Ernesto Aragón Gil
Luis David Martinez Espinosa
::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.
Recordatorio de pseudos basicos (paltzi)
¿Cómo aplico estilos a etiquetas inyectadas?
Para apuntar a una etiqueta particular que viene desde fuera de tu componente, debes pasar el selector de esa etiqueta como argumento dentro de los paréntesis del pseudoelemento. Por ejemplo, si los desarrolladores inyectan un <span>, la sintaxis correcta en tu archivo de estilos sería ::slotted(span) { color: red; }. Esto te permite tener un control granular sobre el contenido dinámico que se renderiza en la interfaz. Si quisieras aplicar un estilo general a absolutamente todo lo que entre por el slot sin importar la etiqueta, usarías el selector universal: ::slotted(*). Es una excelente forma de garantizar que la tipografía, los colores corporativos o los márgenes base de tu componente se respeten a la perfección. Al dominar esta técnica, te aseguras de que sin importar qué tipo de elemento HTML decida inyectar el usuario final en su proyecto, el diseño de tu componente web se mantendrá consistente, profesional y visualmente atractivo en todo momento.
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!