eporroa/html5-templates.html

## html5-templates.html
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta name="robots" content="noindex, nofollow">
      <meta name="googlebot" content="noindex, nofollow">
      <script type="text/javascript" src="/js/lib/dummy.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <style type="text/css">
         template {
         display: none !important;
         }
      </style>
      <title>&lt;template&gt; Polyfill by brianblakely</title>
   </head>
   <body>
      <script>
         // Shim so we can style in IE6/7/8
         document.createElement('template');
      </script>
      <template id="example">
         <h1>
            This is template content.
         </h1>
         <p>
            It's really great.
         </p>
      </template>
      <div id="target">
         <p>
            This is regular old content.
         </p>
      </div>
      <script type='text/javascript'>//<![CDATA[
         /* POLYFILL */
         (function templatePolyfill(d) {
         	if('content' in d.createElement('template')) {
         		return false;
         	}

         	var qPlates = d.getElementsByTagName('template'),
         		plateLen = qPlates.length,
         		elPlate,
         		qContent,
         		contentLen,
         		docContent;

         	for(var x=0; x<plateLen; ++x) {
         		elPlate = qPlates[x];
         		qContent = elPlate.childNodes;
         		contentLen = qContent.length;
         		docContent = d.createDocumentFragment();

         		while(qContent[0]) {
         			docContent.appendChild(qContent[0]);
         		}

         		elPlate.content = docContent;
         	}
         })(document);


         /* EXAMPLE */
         var elExample = document.getElementById('example'),
         	elTarget = document.getElementById('target');

         elTarget.appendChild(elExample.content.cloneNode(true));
         //]]>

      </script>
   </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">
	<script type="text/javascript" src="/js/lib/dummy.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/result-light.css">
	<style type="text/css">
	template {
	display: none !important;
	}
	</style>
	<title><template> Polyfill by brianblakely</title>
	</head>
	<body>
	<script>
	// Shim so we can style in IE6/7/8
	document.createElement('template');
	</script>
	<template id="example">
	<h1>
	This is template content.
	</h1>
	<p>
	It's really great.
	</p>
	</template>
	<div id="target">
	<p>
	This is regular old content.
	</p>
	</div>
	<script type='text/javascript'>//<![CDATA[
	/* POLYFILL */
	(function templatePolyfill(d) {
	if('content' in d.createElement('template')) {
	return false;
	}

	var qPlates = d.getElementsByTagName('template'),
	plateLen = qPlates.length,
	elPlate,
	qContent,
	contentLen,
	docContent;

	for(var x=0; x<plateLen; ++x) {
	elPlate = qPlates[x];
	qContent = elPlate.childNodes;
	contentLen = qContent.length;
	docContent = d.createDocumentFragment();

	while(qContent[0]) {
	docContent.appendChild(qContent[0]);
	}

	elPlate.content = docContent;
	}
	})(document);


	/* EXAMPLE */
	var elExample = document.getElementById('example'),
	elTarget = document.getElementById('target');

	elTarget.appendChild(elExample.content.cloneNode(true));
	//]]>

	</script>
	</body>
	</html>