Si has escuchado hablar de los web components, definir custom properties de item list component será un ejercicio que disfrutarás, ya que vamos a desarrollar uno de los puntos más importantes de los planteamientos de un web component. Las custom properties son variables de CSS que configuran el estilo de un elemento y que pueden ser reutilizadas en cualquier momento del desarrollo.
Así pues, para profundizar en los web components, te hablamos acerca de las custom properties de item list component, para que aprendas a crearlas y a relacionarlas con otras partes del proceso.
Custom properties de item list component
Las custom properties pertenecen a una de las 4 etapas que existen para el planteamiento de los web components. Es el momento en el que nos enfocamos en declarar variables de etiquetas CSS, que nos permitirán configurar el estilo de los elementos de nuestros componentes web.
Este paso forma parte de un proceso de desarrollo mucho más amplio, donde también tenemos que definir la responsabilidad y los eventos de un web component, por lo que tendremos que detallar la clase, los constructores, los estados y otros métodos.
Definir las custom properties
Como las custom properties son elementos CSS que se utilizan para construir el estilo de un elemento, vamos a trabajar sobre el fichero de HTML o CSS. Vamos a abrir una etiqueta de <style> </style>, donde ponemos todo lo que deseamos configurar dentro del div.
Por ejemplo, puedes darle estilo al borde del web component, con colores y tamaños determinados. A su vez, podrás configurar el fondo de tu componente y especificar un color y cualquier otro ítem necesario, además de los tamaños generales de los elementos.
<style>
div {
border: solid grey 2px;
background-color; var (-- item- back-color, whitesmoke);
width: 100%;
}
</style>Definir la clase y los eventos
La creación de custom properties de item list component es muy sencilla, aunque necesitas propiedades creativas. No obstante, también es necesario construir otros elementos para ejecutarla sobre la pantalla de un sitio web. A continuación, te traemos extractos de código que hemos trabajado en posts anteriores, donde construimos todo lo que tiene que ver con la clase de item list component, tanto en el texto del fichero de HTML como en el fichero de las propiedades programables de JavaScript.
En el fichero HTML
El fichero HTML es el lugar en el que se crean los templates o las plantillas que necesitan los web components, así como el texto que se va a pasar por ellos. Aquí también es necesario importar el fichero de las clases que has instanciado en otros ficheros.
<script src=./list-item.js"></script>
const templateElement = document.createElement ('template');
templateElemen.innerHtml =
<style>
</style>
<div class = "list-item-wrapper">
<span> keepcoding component boiler plate </span>
<button> ❌ </button>
</div>
<div class = "list-item-wrapper">
<span> keepcoding component boiler plate </span>
<button> ❌ </button>
</div>En el fichero JavaScript
Por otro lado, en el fichero de JavaScript debes instanciar la clase, los constructores y los métodos que acompañarán a la función del web component (como ListItem, el connectedCallBack y los métodos para definir y lanzar el evento). Además, tendrás que definir el escuchador del evento que viene desde fuera. Recuerda que aquí también deberás referenciar las custom properties de item list component que hemos configurado en el anterior apartado con la función customElements.define.
class ListItem extends HTMLElement {
constructor() {
super();
if (this.getAttribute ('text')) {
throw nrew Error ('Sin texto');
else {
this.text = this.getAttribute (´text);
}
this.attachShadow ({ mode: "open")};
}
connectedCallback() {
const template = templateElement.content.cloneNode (true);
this.shadowRoot.appendChild (template);
const spanElement = this.shadowRoot.querySelector ('span');
spamElement.textContent = this.text;
const buttonElemnt = this.shadowRoot.querySelector ('button');
buttonElement.addEventListener ('clic'), () => {
const event = new CustomEvent ('removeitem');
this.dispatchEvent (event)
this.remove();
});
}
}
customElements.define ("list-items", ListItem);En este post has podido ver cómo se realizan los custom properties de item list component, por lo que ahora es tu momento de practicar todo lo que has aprendido sobre los web components con la realización de un ejercicio propio. ¿Cómo puedes hacerlo? Si necesitas una guía especializada que te acompañe en todo el proceso, te recomendamos nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp. ¡Sigue aprendiendo sobre el desarrollo web con KeepCoding y conviértete en un profesional del código!
