No tienes acceso a esta clase

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

No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

13 Días
19 Hrs
14 Min
46 Seg

:host

15/22
Recursos

Aportes 19

Preguntas 3

Ordenar por:

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

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

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>
        `;
    }
¡¿ 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.
`:host-context` no funciona ni en Firefox ni en Safari. Me pase varios minutos buscando que estaba haciendo mal. Comparto por si a alguien le sucede lo mismo. ![](https://static.platzi.com/media/user_upload/image-2c8ce535-589d-408f-aacd-920715be0986.jpg)![]() Hay una discusión en GitHub respecto a eliminar `:host-context` de la implementación de los web components, ya que parece que ni Firefox ni Safari tienen intención de agregar soporte: <https://github.com/w3c/csswg-drafts/issues/1914>

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