Introducción a los WebComponents

Breve introducción y caracteristicas de los WebComponents

Publicado el: 03 de Marzo 2018 por Victor de Andrés Archivado en: WebComponents | WebApps
webcomponents

En este post voy a realizar una introducción a los WebComponents, un conjunto de caracteristicas aún en desarrollo por parte de la W3C que unidas a las especificaciones actuales de HTML y DOM nos permitirá desarrollar widgets o componentes reutilizables tanto para páginas como aplicaciones web. Este modelo de componentes nos permite realizar tanto la encapsulación como la interoperabilidad de nuestros componentes con otros.

Caracteristicas

Las caracteristicas que podemos encontrar en los webcomponents son las siguientes:

  • Custom Elements

  • HTML Templates

  • HTML Imports

  • Shadow Dom

A continuación veremos cada una de estas características más detalladamente:

Custom Elements

Son elementos HTML personalizados, creados desde 0 y construidos sobre elementos de HTML nativo. Pudiendo tener sus propios CSS. Además pueden ser utilizados de forma independiente.

Veamos la construcción de un componente sencillo, un componente que nos muestre la fecha del dia.

      
  var prototype = Object.create(HTMLElement.prototype);

  function onCreatedComponent() {
    this.textContent = new Date().toString();
  }
  
  prototype.createdCallback = onCreatedComponent;
  
  document.registerElement('current-date', {
    prototype: prototype
  });
      
    

HTML Templates

Otra característica de los webcomponents, es que podemos utilizar “templates” de HTML que no se renderizaran cuando se realice la carga de la página, pero pueden ser instanciados en cualquier momento desde Javascript. Para utilizar esta característica deberemos utilizar la etiqueta

      
  <html lang="es">
    <template>
      <style>
        p {
          padding: 10px;
          color: blue;
        }
      </style>
      <p>Este parrafo no se renderiza hasta que lo invoques</p>
    </template>
  </html>
      
    

HTML Imports

Esta característica nos permite incluir webComponents en nuestros documentos HTML sin necesidad de realizar peticiones AJAX o métodos similares. Este mecanismo evita cargar y ejecutar scripts previamente cargados.

La sintaxis para realizar una importación es como vemos a continuación

      
  <link rel=”import” href=”myWebComponent.html”>
      
    

Si quisiéramos cargar y utilizar el componente que realizamos anteriormente nuestro documento sería como el siguiente:

        
  <html lang="es">
    <head>
      <title>Dia Actual</title>
      <link rel="import" href="current-date.html">
    </head>

    <body>
      <current-date></current-date>
    </body>

  </html>
        
      

Shadow DOM

La última característica de los webcomponts que vamos a ver es el Shadow Dom. Esta característica permite que el navegador web renderize nuestros elementos DOM, aislandolo del árbol principal del documento. Es decir que se crea una barrera “virtual” que impide que cualquier regla declarada en nuestro documento HTML interfiera en nuestro componente.

Librerias webcomponents

Para crear nuestros propios webComponents podemos utilizar la API nativa que está desarrollando el W3C, o utilizar alguna de las siguientes librerías que nos facilitan el desarrollo de los nuestros webComponents.

Polymer

Desarrollado por Google, ofrece la posibilidad de realizar binding en uno o dos sentidos dentro de los templates de los elemento y proporciona un mejor rendimiento entre navegadores.

link: Polymer

X-Tag

Desarrollado por Microsoft esta librería es un “wrapper” del standard del W3C. No tiene soporte para los Custom Elements por lo que para utilizar esta característica, si no esta soportado nativamente por el explorador de uso, hay que utilizar los polyfills de Polymer.

link: X-Tag

Slim.js

Es una librería que nos provee de la capacidad de realizar data binding, y utilizar la herencia de clases nativas de es6 en nuestros webComponents nativos.

link: Slim.js

Comentarios
Escribe tu comentario