Web Component by Irisel Cortez

*WEB COMPONENT

cortezirisel — 2018-05-13 23:31:19 UTC

consiste en distintas tecnologías independientes como en widgets de interfaz de usuario reusables que son creados usando tecnología Web abierta.

*CONSISTE...

cortezirisel — 2018-05-13 23:34:59 UTC

En cuatro tecnologías:

Custom Elements
HTML Template
Shadow Dom
HTML imports

2. TEMPLATES

cortezirisel — 2018-05-13 23:39:32 UTC

Nos permite definir un código HTML preparado para ser usado cuando sea necesario pero que no se activa hasta ese momento, para el navegador no existe.

1. CUSTOM ELEMENTS-ETIQUETAS PERSONALIZADAS

cortezirisel — 2018-05-13 23:42:00 UTC

Ahora cualquiera puede crear su propia etiqueta y marcar de forma más semántica y sencilla lo que de otro modo sería, muy probablemente, una sopa de divs. Te pondré el ejemplo que he visto más veces: un mapa de Google.

3. SHADOW DOM

cortezirisel — 2018-05-13 23:44:25 UTC

Al hablar de las etiquetas personalizadas afirmaba que la Programación Orientada a Objetos llegaba a HTML, y no sólo lo hacía por la posibilidad de extender elementos sino porque ahora también es posible la encapsulación

*Problema

cortezirisel — 2018-05-13 23:46:09 UTC

Si sigues alguna corriente de CSS tipo OOCSS o similares, por lo que empleas preferentemente selectores de clase, sin prácticamente selectores descendentes

*Solución

cortezirisel — 2018-05-13 23:48:18 UTC

En el primer caso, podrías combinar una hoja de estilos con la otra, con la tranquilidad de saber que no habrá conflictos entre ellas, al estar limitadas por el shadow boundary

4. HTML IMPORTS

cortezirisel — 2018-05-13 23:54:36 UTC

es una herramienta para incluir documentos HTML y componentes web de fuentes externas sin necesidad de utilizar peticiones AJAX y métodos similares.

*SOPORTE DEL NAVEGADOR

cortezirisel — 2018-05-13 23:58:19 UTC

Las plantillas HTML tienen soporte en Google Chrome, Mozilla Firefox, Edge de Microsoft, Safari y Ópera.
La compatibilidad con la versión inicial de elementos personalizados y Shadow DOM, conocida como "v0", está presente en algunos navegadores basados en Blink como Google Chrome y Opera, y en Mozilla Firefox

HISTORIA

cortezirisel — 2018-05-14 00:09:32 UTC

Los componentes web fueron introducidos por Alex Russell en la conferencia Fronteers Conference de 2011.

*PARA QUE SE UTILIZAN

cortezirisel — 2018-05-14 00:15:34 UTC

ya hemos visto que podemos usarlos para encapsular el uso de APIs de JavaScript externas como Google Maps y para extender el comportamiento de elementos nativos.
Otro uso es el de añadir marcado semántico o incluso contenido

*COMO USARLO

cortezirisel — 2018-05-14 00:16:58 UTC

Para poder empezar a usar un Web Component, sólo tenemos que importarlo desde la cabecera o etiqueta head de la página que lo vaya a usar mediante la siguiente etiqueta:

*SOPORTE

cortezirisel — 2018-05-14 00:19:30 UTC

Actualmente, no todos los navegadores soportan todas las tecnologías necesarias para que funcionen, sin embargo hay tres frameworks que, mediante polyfills, permiten hacerlos interoperables entre todos los navegadores, son:
-POLYMER
-X-TAG
-BOSONIC

INDEXABILIDAD

cortezirisel — 2018-05-14 00:28:41 UTC

Los Web Components necesitan ejecutar JavaScript para casi todas las tecnologías que utilizan, pero aparentemente Google está mejorando la indexación mediante la ejecución de JavaScript, permitiendo que los Web Components sean indexados.