Lo que subyace bajo lo que denominamos "HTML5" es la conversión en nativo de "frameworks" y/o tecnologías utilizadas a diario. El navegador se convierte así en una aplicación cada vez más potente gracias a que HTML5 cada vez es más poderoso. Los Web Components van en esa línea, haciendo nativo el "templating", los "custom tags" los "import" (los "includes" de otros lenguajes) y el "shadow dom". Y yo con estos pelos...
Charla impartida por Luis Calvo en la última edición de Codemotion (Madrid, Spain - Nov 21-22)
2. 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
3. HTML 5 Web Components
Introducción
Creados a través de una etiqueta (tag)
Incluyen un comportamiento definido
Incluyen una forma de visualización
11. <mi-nuevo-tag></mi-nuevo-tag>
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 (-)
12. 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
13. Eventos
HTML 5 Web Components
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)
14. HTML 5 Web Components
Custom Tags
Dando estilo
16. HTML 5 Web Components
Shadow DOM
Docume
nt
Hij
o
Hij
o
Hij
o
Hij
o
Hij
o
Hij
o
17. 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
HTML 5 Web Components
Shadow DOM
18. HTML 5 Web Components
Shadow DOM
Docume
nt
Hij
o
Hij
o
Shadow
host
Hij
o
Shadow root
Hij
o
Shadow
Tree
Document
Tree
20. 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>
21. <template id="template1">
<li>Contenido</li>
HTML 5 Web Components
</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
23. HTML 5 Web Components
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>
24. HTML 5 Web Components
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>
25. 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 5 Web Components
HTML Imports