HTML5 rocks does say that I can nest templates. But when I use them, like below, they don't render.
<template id ='#outer'>
<ul>
<template = '#inner'>
<li>Stuff</li>
</template>
</ul>
</template>
However, the below works:
<template id ='#outer'>
<p>hi</p>
<template = '#inner'>
<p>there</p>
</template>
</template>
<div id="tDiv">
</div>
var outer = document.querySelector('#outer');
var outerClone = outer.content.cloneNode(true);
var check = outerClone.querySelector('template');
var innerClone = check.content.cloneNode(true);
var tDiv = document.querySelector('#temp');
tDiv.appendChild(innerClone);
BUT this way, I am able to use either innerClone OR outerClone and I get a hi or there. Not hi there.
I am not able to get the real purpose of why templates are nested and not used independently. Doesn't nesting templates complicate stuff?