No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

:host

15/22
Recursos

Aportes 16

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥榖lue鈥
: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 鈥榶ellow鈥
: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 鈥榗ard鈥
: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;

      }

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

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

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

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

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 鈥淒ock 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.

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