<template> Polyfill

Contents of <template> are not rendered inert

HTML

<script>
    // Shim so we can style in IE6/7/8
    document.createElement('template');
</script>

<template id="example" data-selector="">
	<h1>
		This is template content.
	</h1>
	<p>
		It's really great.
	</p>
</template>


<div id="target">
	<p>
		This is regular old content.
	</p>
</div>

CSS

template {
	display: none !important;
}

JavaScript

/* 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));