Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

CSS custom properties

17/22
Recursos

Aportes 7

Preguntas 2

Ordenar por:

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

MY NOTES FOR CUSTOM PROPIERTIES 😄
.
Como se ha comentado en anteriores clases generar un componente reutilizable implica que no tenemos que ir hasta el código de este y cambiarlo, entonces lo que haremos es re asignar nuestros estilos por fuera.

Con shadow dom esta idea que se plantea de poder cambiar nuestros estilos por fuera no es posible, pero esto en cierto punto es mentira ya que podremos hacerlo atraves de las Custom Properties que son unas variables en donde las generamos y de valor estas tienen un estilo.

Lo que haremos es definir variables en nuestros host y luego agregárselas a nuestros elementos que estan dentro de los componentes para probarlas.

:host{
          --primary-color:tomato;
          --secundary-color:salmon;
          --heading-primary: 30px;
          --heading-secundary: 25px;
          display: inline-block;
          width:100%;
          min-width:300px;
          max-width: 450px;

        }

        section{

          background:var(--primary-color);

        }

        section div{

          background: var(--secundary-color);

        }

        h1{

          font-size: var(--heading-primary)
        }
        p{

          font-size: var(--heading-secondary)
        }

Luego para poderlas modificar desde fuera del codigo establecido en el componente, lo que hacemos es modificarlas desde nuestro css, seleccionando lo que queremos modificar y reasignando el valor de la variable.

my-element{
      --primary-color:blue;
      --heading-primary:40px;
    }

    .segundo{

      --primary-color:red;

    }

    .tercero{

    --secundary-color: lime; 
    }

Podremos utilizar como selector el componente y clases que le establezcamos al componente.

Me dieron ganas de crear una libreria, estilo Bootstrap con componentes y estilos prehechos.

Bueno, pues al parecer sí es super fácil cambiar los estilos jaja, intuyo que funciona porque básicamente el :host que está dentro de nuestro custom element hace referencia a la etiqueta custom que hicimos, y al seleccionar a esa etiqueta desde fuera, es como acceder al host y sobreescribirme sus estilos 🤔.
.
Les dejo el código para esta clase:
.
Adicion de las variables

Hola:

Le puse unos estilos adicionales a la etiqueta my-element, y que no necesariamente son variables definidas dentro del componente:

Mi duda es: Esto no es tema de conflicto de estilos css, porque entonces pareciera que las variables, si nos sirven, pero sin ellas también podemos manipular los estilos del componente desde afuera.

Saludos 😃

Ésto si lo veo saludable para con los desarrolladores, es muy intuitivo que si ves una etiqueta, pues la puedas cambiar desde css

Explicación de por qué se nuestros estilos con menor especificidad sobre escriben a los proporcionados en :host: Explicación detallada
ㅤ
En resumen los estilos declarados en el :host son considerados como estilos por defecto, como los que ya tiene el navegador que podemos sobre escribir con cualquier tipo de especificidad, pero si el :host del componente tiene algún estilo con !important no podrá ser sobre escrito.
ㅤ

CSS custom properties

Los nombres de las propiedades que tiene el prefijo --, como --ejemplo-nombre, representan las propiedades personalizadas que contienen un valor que puede ser usado en otras declaraciones usando la función var.
ㅤ
Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.
ㅤ

💡 Distingue mayúsculas y minúsculas

// Es recomendable declarar las propiedades personalizadas dentro de la pseudo-clase :host
getStyles() {
		return `
			<style>
				:host {
					--primary-color: tomato;
					--secondary-color: salmon;
					--heading-primary: 30px;
					--heading-secondary: 20px;

					display: inline-block;
					width: 100%;
					min-width: 300px;
					max-width: 450px;
				}

				section {
					background-color: var(--primary-color);
				}

				section div {
					background-color: var(--secondary-color);
				}

				h1 {
					font-size: var(--heading-primary);
				}

				p {
					font-size: var(--heading-secondary);
				}
			</style>
		`;
	}

Después en el HTML o CSS podemos sobre escribir las propiedades personalizadas.

my-element {
  --primary-color: red;
}
<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Custom Elements</title>
		<link rel="stylesheet" href="style.css">
		<style>
			my-element {
				--primary-color: blue;
			}
			.segundo {
				--primary-color: violet;
				--secondary-color: cyan;
			}
			.tercero {
				--primary-color: blueviolet;
				--secondary-color: lime;
			}
		</style>
	</head>

🤯👏🏽👏🏽