Hasta hace unos años, cuando un desarrollador quería hacer templates de sus páginas , la opción era usar algún lenguaje en el Backbend como PHP, Ruby,Python, etc.
Gracias a la popularidad de estos motores de templates la WhatWG creó una etiqueta nueva en HTML5 poco conocida, que gracias a los Web Componentsse está volviendo cada vez más popular, la etiqueta <template>.
Soporte
No todos los navegadores soportan la etiqueta <template>. Actualmente es soportado por Firefox +22, Chrome +26, Safari +7.1, Opera +15, iOS Safari +8, Android Browser +4.4, Opera Mobile +24, Chrome for Android +39 y Firefox for Android +33, Internet Explorer no tiene soporte alguno a esta etiqueta.
Para poder detectar si el navegador que el usuario está usando tiene soporte para esta etiqueta simplemente creamos el elemento del DOM con JavaScript y nos fijamos si posee la propiedad .content.
Código :
if ('content' in document.createElement('template')) {// Funciona!} else {// Usamos algún motor de templates}
Creando el template
La etiqueta <template> es esencialmente un elemento clonable del DOM para ser reutilizado en tu sitio o aplicación web. Para crear un template simplemente escribes HTML común y lo colocas dentro de la etiqueta <template>.
Código :
<template id="template"><h1></h1></template>
Características principales
Envolver contenido dentro de <template> nos da cuatro características importantes.
1) El contenido es parseado e interpretado por el navegador, pero no renderizado por lo que es invisible para el usuario.
2) Cualquier contenido dentro del template no tiene efectos secundarios. Los scripts no se ejecutan, las imágenes no cargan, el audio no suena y los vídeos no se reproducen, hasta que el template sea usado.
3) El contenido del template no es considerado parte del documento, hacer un document.getElementById() o .querySelector() no va a regresar los elementos del template.
4) El template puede ser colocado en cualquier parte dentro de <head>, <body> o <frameset> y puede contener cualquier tipo de contenido que sea posible usar dentro de estos elementos.
Activando los templates
Para usar un template hay que activarlo, de otra forma nunca va a ser renderizado. La forma más simple es copiar el .content usandodocument.importNode(). La propiedad .content la representación en JavaScript del contenido del template y desde donde se puede acceder a todo el contenido de este.
Código :
var t = document.querySelector('#template');var clone = document.importNode(t.content, true);clone.querySelector('h1').innerHTML = 'Hola Cristalab';document.body.appendChild(clone);
Luego de colocar el clon del template en nuestra aplicación el contenido es renderizado, en este ejemplo dentro del h1 se coloca el string Hola Cristalab y se renderiza todo el HTML del template.
Como usarlo en Internet Explorer y otros navegadores viejos
Hay sin embargo una pequeña diferencia entre el soporte nativo de la etiqueta y el que permite HTML5Shiv y es que el soporte nativo funciona como está explicado arriba, mientras que HTML5Shiv lo que hace es crear el elemento usando document.createElement() y luego le pone el estilo display: none por defecto, por lo que durante muy poco tiempo es posible que el usuario vea el contenido del template.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario