CursosEmpresasBlogLiveConfPrecios

Contenido del curso

Tomar examen

Creación de Componentes Web con Custom Elements API

Resumen

¿Cómo crear componentes web en HTML utilizando Custom Elements?

Crear un componente web utilizando la API de Custom Elements es una habilidad fundamental para cualquier desarrollador frontend moderno. Comencemos con un código básico que muestre cómo construir un componente desde cero utilizando las APIs nativas del navegador, sin necesidad de librerías externas.

Introducción a Custom Elements

Custom Elements es una API web estándar que permite a los desarrolladores definir nuevas etiquetas HTML personalizadas con comportamientos propios. Lo más emocionante es que estas etiquetas se pueden reutilizar en cualquier parte de la aplicación.

Los primeros pasos para definir un componente

Para definir tu componente, necesitas tener al menos dos archivos: un archivo HTML que actuará como entorno de prueba, y un archivo JavaScript donde escribirás la lógica del componente.

Crear la estructura básica:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Elements</title>
</head>
<body>
    <script src="myElement.js" type="module"></script>
</body>
</html>

Lógica del componente

Definimos una clase que extiende de HTMLElement, para crear un componente personalizado. Utilizamos el constructor para inicializar propiedades:

class MyElement extends HTMLElement {
    constructor() {
        super();
        console.log('Hola Mundo');
    }
}

customElements.define('my-element', MyElement);

¿Cómo hacer que el componente se muestre en el DOM?

Para insertar contenido visual, primero creamos elementos y luego los insertamos en el DOM mediante el método connectedCallback.

class MyElement extends HTMLElement {
    constructor() {
        super();
        const p = document.createElement('p');
        p.textContent = 'Hola Mundo y Felices';
    }
  
    connectedCallback() {
        const p = document.createElement('p');
        p.textContent = 'Hola Mundo y Felices';
        this.appendChild(p);
    }
}

customElements.define('my-element', MyElement);

Ampliando el componente con contenido y estilos

Para hacer el componente más complejo, podemos agregar una plantilla HTML y CSS directamente en nuestro archivo JavaScript:

const template = document.createElement('div');
template.innerHTML = `
    <style>
        p {
            color: blue;
        }
        .texto {
            color: red;
        }
    </style>
    <p class="texto">Texto ejemplo para la clase</p>
    <p>Hola Mundo 2</p>
`;

class MyElement extends HTMLElement {
    constructor() {
        super();
    }
  
    connectedCallback() {
        this.appendChild(template);
    }
}

customElements.define('my-element', MyElement);

¿Por qué usar Custom Elements?

  • Reutilización: Los componentes que creamos se pueden utilizar en múltiples lugares de nuestra aplicación.
  • Encapsulamiento: Nos permite encapsular la lógica y estilo del componente, evitando colisiones con otros estilos en la página.
  • Estandarización: No se requieren librerías externas, lo que reduce la carga de dependencias en nuestro proyecto y mejora el rendimiento.

Descubre y experimenta más allá

Dominar los Custom Elements es el primer paso hacia el moderno desarrollo web utilizando web components. En futuras lecciones, exploraremos cómo añadir soporte adicional para Shadow DOM y HTML Templates, llevando tus componentes al siguiente nivel. Experimenta, practica y adéntrate en el vasto mundo de los componentes web. ¡El futuro del desarrollo frontend está aquí para explorar!