Estilos Base en Web Components con Pseudoclase :host
Contenido del curso
Julieta Gallego
Miguel Angel Reyes Moreno
José Luis Quiróz Casas
Andres Felipe Pinchao Ramirez
Albert K. Camargo Barreda
Carlos Eduardo Gomez García
Jimmy Buriticá Londoño
Yefri Enmanuel Encarnación Jiménez
Rigoberto Maldonado
Rubén Ernesto Aragón Gil
Sebastián Buitrago
César Palma
Juan Anaya
Zedovius .
Woldev S.A.S
Rubén Ernesto Aragón Gil
Roberto Medina
Edgar Lopez Arroyo
Kenneth Angulo L
Kenneth Angulo L
Kenneth Angulo L
Jefred Bedoya
Daniel Andres Rojas Paredes
Fernando Yutiz
Alejandra Sarahí Monroy Vélazquez
Daniel Andres Rojas Paredes
Thomas Sheppard
Joel alexander
Joel alexander
Jorge Arias Argüelles
Daniel Andres Rojas Paredes
Daniel Andres Rojas Paredes
Daniel Andres Rojas Paredes
:HOST Pseudoclase que utilizaremos para darle estilos a nuestro componente web (no se trata necesariamente de los estilos visuales). . Se trata de los estilos que vienen definidos por default con una etiqueta, como pueden ser display, padding y margin. . :host da estilos al componente . La pseudoclase :host se utiliza dentro del método donde escribíamos nuestro css del componente getStyles(){} . **:host **{estilos para el componente} . Teniendo varias instancias de un componente, si a una le agregamos una clase por ejemplo 'blue' :host(.blue) {estilos para el componente con la clase blue} Va a buscar el elemento que tenga de atributo una clase con el valor blue y le va a agregar los estilos que definimos. . También podemos darle estilos por atributo. Por ejemplo si a una instancia le agregamos el atributo 'yellow' :host([yellow]) {estilos para el elemento que tenga el atributo yellow} . También podemos agregar cierto contexto. Por ejemplo, si tenemos una instancia del componente dentro de un article con una clase 'card' :host-context(article.card) {estilos} . Hacer cambios al contenido del componente :host([yellow]) h1 {estilos}
Gracias por este resumen.
maravilloso, muchas gracias .
MY NOTES FOR PSEUDOCLASS :HOST
En estas clases veremos los estilos que se manejaran tanto fuera como dentro de los web components
.
:host es una pseudoclase para darle estilo que define a nuestro componente web que no quiere decir que son necesariamente visuales, si no que son los estilos que ya vienen previamente definidos en la pseudeclase host de ese elemento.
.
Nosotros podemos definir esos estilos base que nos ayudan a definir ciertas características base para poder modificar los estilos de nuestra manera.
.
La pseudoclase :host se utiliza dentro del método donde escribíamos nuestro css del componente getStyles(){} y tiene que estar dentro de las etiquetas style para que funcionen estos estilos.
.
<style> :host{ display: inline-block; with:100%; min-width: 300px; max-width: 450px; font-size:20px; background: grey; } </style>
. utilizando esta pseudo clase podremos añadirle estilos base a nuestro elemento . host le dará estilos al componente y los que estén fuera del :host son los que le darán estilo a los elementos que están dentro de nuestro componente. . Aqui le decimos al pseudclase host que si encuentra un elemento con la clase blue haga lo siguiente En este caso solo cambiaria al componente que tenga la clase blue A los demás si le agrega los cambios que ya tenían previamente. .
getStyles(){ return` <style> :host{ display: inline-block; with:100%; min-width: 300px; max-width: 450px; font-size:20px; background: grey; } :host(.blue){ background:blue; } </style> ` }
. También podemos darle estilos por atributos, entonces lo que hacemos es indicarle un atributo a nuetro elemento
:host([atributo]){}
:host([yellow]){ background: yellow; }
Tambien podremos agregar estilos por contexto, es decir le indicamos a nuestra pseudoclase el elemento donde esta nuestro componente junto con su clase y podremos agregarle estilos
:host-context([padreDeNuestroComponente]){}
:host-context(article.card){ display:block; max-width: 100%; } </style>
Cambiando estilos al contenido del componente
:host([yellow]) h2{ color: grey; } :host([yellow]) p{ color: red; }
es "width"
Esto se ve interesante, aunque me pregunto si es recomendable cambiar muchos estilos de un componente 🤔... Es decir, un componente debe ser reutilizable, y si empezamos a darle displays, tamaños de caja y demás, es posible que dicho componente tenga problemas para adaptarse a los lugares en donde queremos reutilizarlos 🤔 . Dejo el código de la clase: . Adicion de estilos a los componentes con host
Me estaba preguntando lo mismo, pero definitivamente si es necesario darle unos estilos por defecto.
Tienes razón, pero entiendo que la pseudo clase :host nos sirve para darle estilos de forma predeterminada a nuestros componentes, por lo que cualquiera que los use puede cambiarlos si así lo desea. Por ejemplo la etiqueta <p> viene con estilos como display block, nada nos impide ponerle un display inline.
Buen dia, Increible pseudoclase :host.
esta clase hice unas mejoras.
<body> <my-element> <span slot="title">Apple Music</span> <span slot="description"> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </span> </my-element> <my-element class="white-container"> <span slot="title">Apple TV</span> <span slot="description"> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </span> </my-element> <my-element orange-container> <span slot="title">Apple Care</span> <span slot="description"> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </span> </my-element> <article class="card"> <my-element yellow-container> <span slot="title">Apple Cart</span> <span slot="description"> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </span> </my-element> </article> <script src="./my-element.js" type="module"></script> </body>
getStyle (){ return ` <style> section{ display: inline-block; position: relative; left: calc(25% - 45px); bottom: 35px; margin: 0 auto; } h2{ color: red; background-color: black; width: 150px; text-align: center; padding: 5px; line-height: 1.2; border-radius: 10px; position: relative; left: 60px; top: 40px; } .body-content{ width: 270px; height: 230px; background-color: #3a4f12; padding: 5px; border-radius: 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9); } p{ padding: 10px; text-align: justify; } :host { display: inline-block; width: 100%; min-width: 300px; max-width: 390px; background-color: grey; margin: 15px 10px 15px 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9); } :host(.white-container) { /* clase */ background-color: white; } :host([orange-container]){ /* por atributo */ background-color: orange; } :host-context(article.card){ display: block; position: relative; left: 50%; transform: translateX(-50%); max-width: 50%; background-color: blue; } </style> `; }
Te qeduó super
como sera de ancho el compu del profe que a él le salen los tres componentes sin hacer salto de linea en el mio en cambio uno queda abajo. necesito una laptop mas ancha? 🤨 🤔
una pantalla mas ancha
necesitas un monitor para no solo tener la pantalla de tu laptop xd
Esta extensión de VS Code nos permite ponerle higlight al css que escribimos en JS. Solo para que sea visualmente más fácil de leer: es6-string-css Para usar el highlight solo escribimos un comentario
getStyles() { return /*css*/` :host { display: inline-block; } ` }
Dos consejos para este curso:
Gracias
Hola:
Como referencia de la pseudo-clase :host:
https://developer.mozilla.org/es/docs/Web/CSS/:host
Saludos :)
setStyles() { return ` <style> :host { display: inline-block; background-color: red; width: 100%; min-width: 320px; max-width: 600px; } :host(.blue) { background-color: blue } :host([yellow]) { background-color: yellow; } :host([yellow]) h1 { color: purple; } :host-context(article.card) { display: block; max-width: 100px; } </style> `; }
Me estaba matando la cabeza, pero encontre que este bloque no me funciona en firefox. (2026, 153.0.3 (64-bit) )
:host-context(article.card) {
border: 2px solid red;
display: block;
max-width: 100%;
}
¿Qué pasa si modifico etiquetas internas aquí?
Si combinas la pseudoclase del contenedor principal con selectores de etiquetas internas (por ejemplo, :host([alerta]) h1), logras un control quirúrgico sobre el contenido de tu componente. Lo que sucede es que el navegador detecta la condición en la raíz (el atributo alerta) y, solo si se cumple, viaja hacia adentro para alterar específicamente el título h1, cambiándolo a color rojo, por ejemplo.
Esto es fantástico porque te permite crear reacciones en cadena. No necesitas agregarle clases individuales a cada párrafo o título dentro de tu componente. Simplemente cambias un estado en la etiqueta principal (el host) y todos los elementos internos se reacomodan o cambian de estilo en sincronía, manteniendo tu código HTML interno limpio y libre de clases innecesarias.
¿Es posible dar estilos según el padre?
Sí, absolutamente. Para esto existe una herramienta muy poderosa llamada :host-context(). Imagina que tu componente es un widget del clima que normalmente tiene un fondo claro, pero si lo colocas dentro de un panel oscuro (por ejemplo, un <aside class="dark-mode">), necesitas que sus letras se vuelvan blancas automáticamente para mantener el contraste.
Con :host-context(aside.dark-mode), tu componente actúa como un radar: escanea hacia arriba en el árbol del DOM buscando si alguno de sus contenedores padre coincide con ese selector. Si lo encuentra, aplica los estilos que definas. Esto es vital para crear componentes verdaderamente reutilizables que sean conscientes de su entorno y se integren perfectamente sin importar en qué parte de la aplicación los coloques.
Dame los puntos mas importantes de la clase Separalos por semantica humana, listas, titulos, subtitulos, negrillas, etc. Quiero que el resumen sea lo mas claro y conciso posible Omite informacion como saludo, nombre, etc Omite la pregunta final.
El poder de :host en Web Components
La pseudoclase :host es la herramienta fundamental para definir los estilos base de tu componente web, permitiéndote controlar el elemento "contenedor" mismo, no solo su contenido interno.
Conceptos clave
<h1> o <p>, :host te permite establecer las reglas iniciales (display, dimensiones, tipografía) para tu componente.<style> para que el navegador lo procese correctamente.Personalización avanzada
:host(.blue)) o atributos (:host([yellow])) presentes en la instancia del componente.:host(article.card).<h1> o <p>) basándote en el estado del host, usando la sintaxis :host([atributo]) h1 { ... }.hola los navegadores me estan bloqueando el acceso ami archivo js ccess to script at 'file:///C:/Users/57311/Documents/vs_accesible/JSFRontEnd/WEBcomponents/custumElements/host.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app. ¿ porque sera,qeu hago?
Diego una consulta ¿Es posible recuperar el autocompletado en las lineas de codigo del componente donde se usan backtick?
Si, yo uso la extensión es6-string-css y es6-string-html :)
yo prototypo el html en un archivo aparte, y el css con un procesador. luego ctrc ctrv
Esa nomenclatura de definir estilos con paréntesis rectos y curvos, es por los selectores de CSS? Dónde podría ver este tipo de selectores definidos?
Cuando haces seleccion de elementos por los atributos
<button data-ejemplo="es"> </button> <label for="d"> </label>
los puedes seleccionar pot Tlas propiedades que contiene en este caso puedo asignalr estilos al boton, seleccionandolo por su tag data-ejemplo
button[data-ejemplo] { background-color: red; }
Y utiliar parentesis para pasar parametros se utiliazan en ciertos casos. Ejemplo cuando quiero seleccionar elementos impar.
.container::nth-child(odd){ width:300px; }
Cuando utilizamos :host-context(article.card) en nuestro componente, estamos aplicando estilos específicos a nuestro componente solo si se encuentra dentro de un elemento <article> que tiene la clase card. Esto permite que el componente tenga un estilo diferente basado en su contexto, facilitando la personalización de presentación según el entorno en que se encuentre. Los estilos aplicados pueden incluir propiedades como display, background-color, o cualquier otra propiedad CSS que defina la apariencia del componente en ese contexto específico.
¡¿ que pasa si lo de esta clase no se hace con atributeChangedCallback en vez de slots? lo pregunto porque el cambiar el display a inline block no me funciona como en la clase, intente cambiandolo a flex y aplicando wrap y me di cuenta que reorganiza las etiquetas dentro de mi componente. para obtener algo similar a la clse tendria que enscerrar en el html tods los componentes dentro de un div y ahi aplicar el flex o inlineblock.
El host afecta a un contenedor diferente al seccion. es como si el seccion estuviera dentro de un div .¿dentro de mi codigo ademas de un titulo y un parrafo tengo una imagen encapsulada en un div y un boton. para el estilo copie y pegue el estylo del :host de la clase, peroel inline block no parece funcionar. ¿alguna idea de el porque ?
hay alguna manera pueda hacer esto con un preprocesador? se me ocurria que al crear componentes, seria mejor escribir los estilos en un preprocesador y luego tomar el codigo css que el preprocesador me da (es un codigo optimizado) para asi pegarlo en el metodo getStyles de mi componente, pero con lo que vimos en eesta clase ya no se si es viable esta estrategia.