¿Qué es?
En este tutorial, vamos a aprender qué son y cómo crear web components. Se trata de un nuevo estándar HTML5, que incluye cuatro subelementos:
- Custom elements: permiten crear tus propias etiquetas personalizadas, permitiendo hacer tu html más semántico.
- Templates: plantillas html.
- Shadow DOM: permiten esconder elementos del DOM.
- HTML Imports: permiten importar código html, donde podremos tener almacenado un componente.
La web oficial se encuentra en:
Estos cuatro subelementos se pueden utilizar de forma independiente o pueden combinarse entre sí, que es como suelen usarse, y por ahora sólo funcionan en pocos navegadores, como Google Chrome (ya explicaremos en otra entrada cómo usarlo en el resto de navegadores mediante Polyfills). Vamos a ver ejemplos reales.