Post on 05-Jul-2015
description
HTML 5 Web Components
HTML5
Web Components
Madrid – 21 y 22 de Noviembre de 2014
HTML 5 Web Components
1. Introducción2. Custom Tags3. Shadow Dom4. Templates5. HTML Imports6. Compatibilidad
Índice
Luis Calvo Díaz
Senior Front Developer en Paradigma Tecnológico
@LuisCalvoDiaz
Autor
HTML 5 Web Components
Introducción
Creados a través de una etiqueta (tag)
Incluyen un comportamiento definido
Incluyen una forma de visualización
HTML 5 Web Components
Introducción
HTML 5 Web Components
Introducción
HTML 5 Web Components
Introducción
HTML 5 Web Components
HTML 5 Web Components
Introducción
HTML 5 Web Components
Customs
Tags
HTML Import
s
Templates
Shadow
DOM
HTML 5 Web Components
Customs Tags
HTML 5 Web Components
2
HTML 5 Web Components
Custom Tags
Permite a los desarrolladores definir nuevos elementos
HTML
El nombre del custom tag debe contener al menos un guión (-)
<mi-nuevo-tag></mi-nuevo-tag>
HTML 5 Web Components
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
HTML 5 Web Components
Custom Tags
o createdCallbackse ha creado una instancia del elemento
o attachedCallbackse ha insertado una instancia del elemento
o detachedCallbackse ha eliminado una instancia del elemento
o attributeChangedCallback(attrName, oldVal, newVal)
Eventos
HTML 5 Web Components
Custom Tags
Dando estilo
HTML 5 Web Components
Shadow DOM
HTML 5 Web Components
3
HTML 5 Web Components
Shadow DOM
Document
Hijo
Hijo
Hijo
Hijo
Hijo
Hijo
HTML 5 Web Components
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
HTML 5 Web Components
Shadow DOM
Document
Hijo
Hijo
Shadow host
Hijo
Hijo
Shadow root
Shadow Tree
Document Tree
HTML 5 Web Components
Templates
HTML 5 Web Components
4
HTML 5 Web Components
Templates
<script type="text/template" id="template1"><li><%name%></li>
</script>
<script type="text/x-handlebars-template" id="template2">
<li>{{name}}</li></script>
HTML 5 Web Components
<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 5 Web Components
HTML Imports
HTML 5 Web Components
5
HTML 5 Web Components
<iframe src=“miNuevaPagina.html”></iframe>
HTML Imports
<iframe>
var xhr = new XM LHttpRequest();
xhr.open('GET', m iNuevaPagina.htm l', true);
xhr.responseType = 'docum ent';
AJAX
Trabajar con HTML, el componente básico de la web requiere una gran cantidad de esfuerzo
<script src>
<link rel=“stylesheet”>
<img><video
><audio
>
HTML 5 Web Components
<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>
HTML Imports
HTML 5 Web Components
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
HTML 5 Web Components
Soporte en navegadores
HTML 5 Web Components
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/