No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

::slotted

16/22
Recursos

Aportes 11

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

::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

Diego diciendome en la clase 16 que repita desde cero toda la estructura

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"
	},
}

**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 😃

MY NOTES FOR PSEUDO CLASS ::SLOTTED 😄
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.

¡Cool!