HTML5 Web Components

HTML5
Web Components
Madrid – 21 HTML 5 y Web 22 Components
de Noviembre de 2014

HTML 5 Web Components
Índice
1. Introducción
2. Custom Tags
3. Shadow Dom
4. Templates
5. HTML Imports
6. Compatibilidad
Autor
Luis Calvo Díaz
Senior Front Developer en Paradigma Tecnológico
@LuisCalvoDiaz

Introducción
Creados a través de una etiqueta (tag)
Incluyen un comportamiento definido
Incluyen una forma de visualización

Introducción

Custo
ms
Tags
HTML
Import
s
Templa
tes
Shado
w
DOM

Customs Tags
2

<mi-nuevo-tag></mi-nuevo-tag>
Custom Tags
Permite a los desarrolladores definir nuevos elementos
HTML
El nombre del custom tag debe
contener al menos un guión (-)

Custom Tags
Permite crear nuevos elementos que extienden de otros
elementos
<button is=“mi-nuevo-boton”></button>
https://developer.mozilla.org/en-US/docs/Web/API

Eventos
Custom Tags
o createdCallback
se ha creado una instancia del elemento
o attachedCallback
se ha insertado una instancia del elemento
o detachedCallback
se ha eliminado una instancia del elemento
o attributeChangedCallback(attrName, oldVal,
newVal)

Custom Tags
Dando estilo

Shadow DOM
3

Shadow DOM
Docume
nt
Hij
o
Hij
o
Hij
o
Hij
o
Hij
o
Hij
o

Shadow DOM give us
markup
encapsulation, style
boundaries, and
exposes (to web
developers) the same
mechanics browser
vendors have been
using to implement
their internal UI
Shadow DOM

Shadow DOM
Docume
nt
Hij
o
Hij
o
Shadow
host
Hij
o
Shadow root
Hij
o
Shadow
Tree
Document
Tree

Templates
4

Templates
<script type="text/template" id="template1">
<li><%name%></li>
</script>
<script type="text/x-handlebars-template"
id="template2">
<li>{{name}}</li>
</script>

<template id="template1">
<li>Contenido</li>
</template>
Templates
El contenido de un template está “inerte” hasta que se
activa (scripts, imágenes, audio/vídeo)
El template puede colocarse en cualquier parte y puede
contener cualquier tipo de contenido

HTML Imports
5

HTML Imports
<ifram
e>
<iframe
src=“miNuevaPagina.html”></ifram
e>
AJAX
var xhr = new XM LH ttpRequest();
xhr.open('G ET', m iNuevaPagina.htm l', true);
xhr.responseType = 'docum ent';
Trabajar con HTML, el componente básico de la web requiere una gran
cantidad de esfuerzo
<script
src>
<link
rel=“stylesheet”>
<video <audio
>
>
<img>

HTML Imports
<head>
<link rel="import" href="/path/to/imports/stuff.html">
<!– Documentos en otro dominio necesitan CORS-enabled. -->
<link rel="import" href=“http://example.com/elements.html”>
</head>

var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);
HTML Imports

Soporte en navegadores

Recursos
Webcomponents.org -> http://webcomponents.org/
Polymer -> https://www.polymer-project.org/
X-Tag -> http://x-tags.org/
Galeria de Web Components
http://customelements.io/
http://component.kitchen/
http://builtwithpolymer.org/

HTML5 Web Components

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (19)

Similar a HTML5 Web Components

Similar a HTML5 Web Components (20)

Más de Paradigma Digital

Más de Paradigma Digital (14)

Último

Último (10)

HTML5 Web Components