: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}
Introducción a los Web Components
Introducción a los Web Components
¿Qué problemas resuelven los Web Components?
¿Qué son los Web Components?
APIs de Web Components
Beneficios de Web Components
Ciclo de vida de los Web Components
Ciclo de vida de un componente
Web Components
Custom Elements
Template
Shadow DOM
Manejo de datos
Content Slot
Multi Content Slot
Atributos
attributeChangedCallback
disconnectedCallback
Estilos en Componentes
:host
::slotted
CSS custom properties
Proyecto
Presentación del proyecto
Estructura base de nuestro componente
Atributos en nuestro componente
Web Components de terceros
Utilizando componentes de terceros
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
:host
15/22Aportes 19
Preguntas 3
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;
}
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
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>
`;
}
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? 🤨 🤔
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:
- Les recomiendo enumerar las carpetas en el orden que fueron creadas para que no se pierda la progresividad secuencial del curso.
- Cuando estén testeando si se realizó el cambio del display: in-line del componente con :host y su pantalla no es gigante como la del profesor, en la consola dev-tools pueden acceder al menú de los 3 puntos y hacer uso de “Dock side”, que les permititrá mover la consola de posición. Lo más cool de esta feature es su atajo: Ctrl + Shift + D que les va a permitir intercalar rápidamente entre las dos últimos posiciones de la consola utilizadas.
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>
`;
}
El selector :host se utiliza para seleccionar el elemento personalizado (componente) en sí mismo al aplicar estilos CSS desde dentro del propio componente.
Cuando creas un componente web personalizado utilizando tecnologías como Custom Elements, Shadow DOM y HTML Templates, el componente encapsula su propio DOM y estilos. La pseudo-clase :host te permite definir estilos específicos para el propio componente desde dentro del Shadow DOM, donde los estilos del componente no afectarán a otros elementos fuera de su alcance.
Fascinantes estos web components, ya me vi usándolos en mis proyectos : D
https://www.youtube.com/watch?v=QhHiJo-l7Pw
les quiero compartir este video en donde se explica la encapsulacion del css
Tengo un dilema existencial con esto.
Primeramente yo para tener como una mejor visibilidad y control de mis estilos, reinicié los estilos del proyecto general en la etiqueta style.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Ahí todo norma, se supone que los estilos del componente no interfieren en el documento general ya que usamos shadow DOM.
Cuando especifiqué este reinicio de estilos en el modelo de caja, estos tambien se vieron reflejados en el componente; Significa que así los estilos dentro del shadowDom no affectan al DOM general, esto si pasa al contrario, o sea que los estilos del DOM general si afectarán al componente.
Como pueden ver al yo tratar de centrar mi componente dentro del DOM con:
margin: 0 auto;
Este lo que hace es tomar el reinicio de estilos en el documento general y no permitirme modificar al menos esta parte de modelo de caja de mi componente con respecto a su espacio al rededor, al menos con el reinicio en el selector generar ‘*’.
Significa que por lo menos la disposición de mi componente debe ser manejada desde una solución externa dentro de un contenedor y con este centrar sus elementos, como con FLEX o GRID.
Por si solo no logro centrarlo, de la manera más tradicional.
Espero me puedan leer y me expliquen el porque de este curioso fenomeno ya que me parece interesante que no podamos definir la disposición del componente desde el componente en si mismo.
:host
La pseudo-clase CSS :host selecciona la sombra host de sombra DOM que contiene el CSS que se usa en el interior, esto le permite seleccionar un elemento personalizado desde su sombra DOM.
ㅤ
Nota: Esto no tiene ningún efecto cuando se usa fuera de una sombra DOM.
/* El selector del componente perse */
:host {}
/* El selector del componente con una clase en específico*/
:host(.blue) {}
/* El selector del componente con un atributo */
:host([yellow]) {}
/* El selector del título del componente con atributo */
:host([yellow]) h1 {}
/* El selector del componente que esté dentro de una etiqueta article con clase card */
:host-context(article.card) {}
La pseudo clase :host sirve para poder agregarle estilos al componente
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?