Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

:host

15/22
Recursos

Aportes 12

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

Para que lo tengan en cuenta el :host-context() NO funciona en Firefox

https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()

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;

      }

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? 🤨 🤔

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

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;
            }  
          `
      }

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>
    `;
  }

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>
        `;
    }

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