Ahora que ya conocemos las bases de los Custom Elements, somos capaces de crear nuestras propias etiquetas HTML. Ahora toca comenzar a crear componentes básicos, y para ello es necesario aprender las diferentes formas de estructurar archivos y carpetas.
En este artículo vamos a preparar una estructura de carpetas y archivos utilizando WebComponents, y a crear nuestro primer componente, examinando las diferentes formas de cargarlo, tanto desde HTML como desde Javascript.
Estructura de carpetas
Quizás, lo primero que deberíamos tener claro es la estructura de carpetas y archivos que vamos a tener para crear nuestros componentes. Vamos a partir de un ejemplo sencillo de base, donde src es la carpeta que contiene nuestro código fuente:
- src
+-- components/ # Carpeta para los componentes
| +-- AppElement.js # Componente de Aplicación
+-- index.html # Página principal
+-- index.css # Estilos globales
En principio, esta «arquitectura de archivos y carpetas» depende mucho de cada programador y es muy variable dependiendo de nuestros objetivos.
Observa que tenemos los archivos principales
index.htmleindex.cssy luego, una carpetacomponents/donde vamos a guardar cada uno de los componentes que tengamos.
Crear el componente
Empecemos por la estructura del componente. Por defecto, y como hemos dicho, los componentes se incluyen en la carpeta src/components/. Siempre deben estar separados en archivos independientes, con el nombre de la clase en PascalCase. Si nuestro componente HTML se llama <base-element>, la clase y el archivo se debe llamar BaseElement.
Veamos el contenido de nuestro archivo src/components/AppElement.js:
class AppElement extends HTMLElement {
constructor() {
super();
this.textContent = "¡Hola Mundo!";
}
}
customElements.define("app-element", AppElement);
Esto sería lo mínimo para crear un componente. No olvides nunca escribir el customElements.define() del final, ya que es el que realiza la asociación de la etiqueta HTML <app-element> con la clase AppElement.
Cargar el WebComponent
Ya tenemos el componente creado, ahora falta enlazarlo desde el resto de nuestra aplicación, y se puede hacer de varias formas: siguiendo un enfoque de HTML puro, haciéndolo mediante Javascript o siguiente una forma más basada en el DOM.
Veamos cada uno de ellos.
La forma más sencilla de cargar un WebComponent, probablemente, sea seguir el enfoque HTML. Observa el <head> del fichero index.html, en él, vamos a cargar nuestro componente mediante una etiqueta <script>:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Página principal</title>
<link rel="stylesheet" href="./index.css">
<script src="./components/AppElement.js"></script>
</head>
<body>
<app-element></app-element>
</body>
</html>
Con esto cargaríamos el componente desde nuestro fichero HTML y ya podríamos utilizarlo, como se puede ver en el <body>.
Una alternativa sería utilizar Javascript mediante un fichero index.js, o en una etiqueta <script>, donde se importe el componente en cuestión:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Página principal</title>
<link rel="stylesheet" href="./index.css">
<script type="module">
import "./components/AppElement.js";
</script>
</head>
<body>
<app-element></app-element>
</body>
</html>
Independientemente de utilizar una etiqueta <script> en línea o un fichero externo, debemos utilizar el atributo type="module", ya que de lo contrario no nos permitirá importar el componente y nos dará un error similar al siguiente:
Uncaught SyntaxError: Cannot use import statement outside a module
Si obtienes dicho error, simplemente revisa que no te hayas olvidado del type="module" en el <script> del index.html.
Usar el componente
Una vez tengamos nuestro componente cargado y enlazado, ya estamos listos para utilizarlo y añadirlo en nuestro HTML. De la misma forma, también tenemos varias maneras de crearlo en el HTML.
La primera forma y más sencilla de usar nuestro componente, es simplemente escribir el nombre de nuestra etiqueta HTML personalizada en el HTML:
<app-element></app-element>
Con esto, el navegador actuará y mostrará nuestro componente.
Podríamos utilizar el DOM y aprovechar la potencia de Javascript para crear elementos dinámicos o con cierta lógica. En este caso, tras importar el componente mediante HTML o Javascript, desde otro fichero Javascript podríamos hacer lo siguiente:
const appElement = document.createElement("app-element");
document.body.append(appElement);
- 1️⃣ Creamos el elemento HTML
<app-element>en memoria, en la constanteappElement. - 2️⃣ Insertamos el elemento en el DOM del documento HTML, concretamente al final del
<body>.
Una tercera alternativa (variación de la anterior) nos permitiría importar la clase de nuestro componente, para luego crear una instancia utilizando el new de Javascript:
import { AppElement } from "./components/AppElement.js";
const appElement = new AppElement();
document.body.append(appElement);
La única diferencia es que en este caso, en el fichero src/components/AppElement.js, tendríamos que añadir un export a la clase definida:
export class AppElement extends HTMLElement {
/* ... */
}
De esta forma creamos el componente desde Javascript, útil para hacerlo dinámico, usarlo en bucles, condicionales y/o aprovecharnos de toda la potencia de Javascript.
Ahora que ya tenemos la estructura clara, debemos ver ejemplos y aprender que cosas podríamos hacer para crear componentes realmente útiles, que trabajen con el HTML y el CSS de nuestros componentes. Lo veremos en los siguientes capítulos.
