Hace ya tiempo que los desarrolladores utilizan marcos de trabajo o frameworks de JavaScript como, por ejemplo, React o Angular, para definir elementos web que puedan reutilizar. Sin embargo, cada framework utiliza un estándar diferente, lo cual impide en muchos casos que se puedan aplicar los llamados code snippets o fragmentos de código, que resultan muy útiles por ser comunes a diferentes proyectos. Por suerte, existen los llamados web components (componentes web): elementos HTML reutilizables y compatibles con todos los marcos de trabajo. Estandarizado en 2012, este tipo de elementos web ya puede usarse en todos los navegadores más populares.
Los componentes web son bloques de código que encapsulan la estructura interna de elementos HTML, incluyendo CSS y JavaScript, permitiendo así que el código se pueda volver a usar como se quiera en otras webs y aplicaciones. El concepto fue desarrollado por un grupo de trabajo del World Wide Web Consortium (W3C), creado en 1994 por Tim Berners-Lee, considerado el padre de la Web. Este grupo trabaja desde entonces por la estandarización de todas las tecnologías básicas de la red. El modelo de componentes web que se publicó en 2012 establece principalmente cuatro especificaciones referidas a la creación de estos prácticos elementos HTML. Son las siguientes:
Todos los navegadores convencionales ya son compatibles con los componentes web estándares. Para trabajar con los códigos HTML encapsulados, pueden usarse todos los frameworks o bibliotecas de JavaScript que trabajan con HTML.
Algunas bibliotecas y frameworks, como Angular o jQuery, son desde hace años herramientas de trabajo esenciales para los programadores web. Si bien estas estructuras básicas de codificación son prácticas, versátiles y ahorran mucho trabajo en el desarrollo de proyectos, resultan con frecuencia inflexibles a la hora de usarlas en más de un proyecto. Así, no es raro para un desarrollador tener que volver a escribir un código cada vez que hay un cambio de framework, por ejemplo. Para tratar de solucionar este problema, el Consorcio W3C introdujo los componentes web, creando así un marco universal para poder reutilizar códigos HTML, CSS y de JavaScript de una forma simple y común a los tres lenguajes.
Puesto que los elementos web universales se caracterizan por una sintaxis sencilla y fácil de aprender, los programadores con menos experiencia también se benefician de este estándar del W3C. Desde hace algunos años, Google trabaja en el llamado Polymer Project para desarrollar bibliotecas y plantillas de programación de componentes web para ponerlas a disposición del público general.
El modelo de los componentes web se basa principalmente en cuatro especificaciones que explicaremos en detalle a continuación, usando, además, ejemplos concretos.
Los custom elements (elementos definidos por el usuario) son etiquetas HTML que encapsulan contenido HTML, incluyendo directrices CSS y scripts. Se alistan en el CustomElementRegistry y sus características más importantes son las siguientes:
Para crear un custom element se necesita JavaScript y el método define. El siguiente componente web muestra un custom element mediante el cual se puede integrar un button:
customElements.define('my-button', MyButton, { extends: 'p' });Para poder usar ahora este elemento en una aplicación web, basta con el siguiente código:
<my-button></my-button>La principal característica de los componentes web es su capacidad para encapsular elementos HTML. La API Shadow DOM facilita esta tarea porque permite añadir árboles DOM ocultos a un árbol de documentos, de forma que solo sea visible la etiqueta HTML del Shadow DOM. De esta forma, pueden añadirse elementos HTML al DOM oculto sin tener que alterar cada vez también el DOM principal. En nuestro artículo sobre Shadow DOM y su modo de funcionamiento hemos recogido toda la información sobre esta técnica y casos de uso específicos.
Los ES modules son módulos que exportan objetos, funciones o variables desde un archivo de JavaScript. Al hacerlo, pueden dividir variables en grupos dentro de un mismo archivo y referenciarlas. Actualmente, existen dos sistemas de ES modules. Mientras que CommonJS originalmente pertenecía a Node.JS, el sistema más reciente ya está incluido en JavaScript ES6.
Para exportar una función desde una biblioteca de JavaScript, utiliza el método export. En el siguiente ejemplo, se exporta una función que devuelve un input string dos veces.
// ? lib.bib1
export const repeat = (string) => `${string} ${string}`;
}Con import se puede volver a solicitar la función exportada tantas veces como se quiera.
main.mjs
import {repeat} from './lib.mein';
repeat ('Buenos días');
// → 'Buenos días Buenos días'Las llamadas HTML templates son plantillas de archivos HTML. Los elementos que contienen se mantienen inactivos y sin renderizar (sin ser representados gráficamente) hasta que sean solicitados explícitamente. Esta característica hace que no perjudiquen el tiempo de carga de las páginas web. Son, por lo tanto, una buena alternativa a los métodos de JavaScript tradicionales.
Con la etiqueta <template> se define una plantilla HTML. En el siguiente ejemplo, la plantilla creada lleva el nombre my element.
<template id="my-element">
<p>My element</p>
</template>Para utilizar la plantilla en una página web, actívala con los métodos de JavaScript getElementbyId y content e intégrala en el DOM.
let template = document.getElementById('my-element');
let templateContent = template.content;
document.body.appendChild(templateContent);Los ejemplos anteriores solo funcionan si se combinan entre sí las partes que forman el modelo de componentes web. A continuación, te explicamos cómo hacerlo paso a paso:
Este tutorial muestra una sencilla introducción a la programación de web components:
Para proteger tu privacidad, el vídeo se cargará tras hacer clic.
Algunas versiones antiguas de ciertos navegadores no son compatibles con componentes web. Actualmente, todos los navegadores populares ya permiten usar custom elements, shadow DOM, ES modules y HTML templates. La tabla que se muestra a continuación resume las compatibilidades de los distintos web components.
| ¿Compatible? | Firefox | Chrome | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Custom elements | Sí | Sí | Sí (a partir de la versión 76) | Sí | Sí |
| Shadow DOM | Sí | Sí | Sí (a partir de la versión 75) | Sí | Sí |
| ES modules | Sí | Sí | Sí | Sí | Sí |
| HTML templates | Sí | Sí | Sí | Sí | Sí |
Especialmente en los comienzos, programar componentes web puede resultar complicado. En la web, sin embargo, existen numerosas bibliotecas con plantillas, funciones estándares y ejemplos prácticos de web components que te harán el trabajo más fácil:
Bootstrap es la solución más popular para la concepción y creación de interfaces de gran alcance. La colección de componentes HTML, CSS y JavaScript que Twitter publicó en 2011 bajo la licencia MIT, goza, sin duda, de una gran comunidad y de numerosas extensiones, interfaces para sistemas de gestión de contenidos y temas prediseñados. No obstante, existen diversas alternativas gratuitas a...
¿Te gustaría conocer los lenguajes de programación web? El primer reto es elegir uno. Después de todo, existen cientos de lenguajes de programación, pero no todos ellos son apropiados para el desarrollo web. Para que te sea un poco más fácil decidirte y puedas comenzar con tu proyecto cuanto antes, te contamos un poco más sobre los lenguajes de programación web más populares.
CSS es uno de los lenguajes más importantes de la World Wide Web. No obstante, trabajar con este lenguaje de stylesheet suele resultar tedioso, por lo que muchos desarrolladores prefieren usar Less. Este preprocesador de CSS no solo simplifica la escritura en lenguaje de hoja de estilo, sino que le añade útiles elementos como variables, funciones o mixins. Para saber cómo funciona, consulta...
La ingeniería inversa de software puede ayudar a descubrir y a conocer en profundidad su funcionamiento y su estructura. A través del desarrollo inverso de un software hasta el código fuente, no solo es posible detectar posibles fallos, sino también analizar los programas de la competencia. Por ello, la ingeniería inversa tiene numerosas y variadas aplicaciones. Pero ¿cómo se utiliza exactamente...
Los sitios web y las aplicaciones pasan por cambios constantes. Las nuevas características y funciones prometen a menudo mayor calidad, más seguridad o un mejor rendimiento del proyecto web, por lo que implementarlas es a menudo una mera formalidad. Sin embargo, muchos navegadores se quedan muy atrás en lo que respecta a la compatibilidad con las modernas tecnologías web, un problema que se puede...
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver packs
