Perch and the HTML5 Template tag

Hi,

I have the following template:

<template id="sidebar_template">
<script>
var sidebartemplate,sidebarclone,sidebarhost;
var scenario;
</script>
<style>
.sidebar{margin:1.5rem 1rem 0 .75rem;padding:0 1rem 1rem 0;white-space:nowrap;}
@media(max-width:767px){.sidebar{display:none;}}
</style>
<div class="<perch:content id="sideclass" type="select" label="Class" options="sidebar,sidebar image_sidebar,sidebar image_sidebar fader" help="Select whether Sidebar uses a List of Links, Single image or Image fader (mutually exclusive)"/>">

</div>
</template>

<div id="sidebar"></div>

<script>
sidebartemplate=document.querySelector('#sidebar_template');
sidebarclone=document.importNode(sidebartemplate.content,true);
sidebarhost=document.querySelector('#sidebar');
sidebarhost.appendChild(sidebarclone);
</script>

Which generates content that can supposedly be reused in the browser but when I attempt to do that, i.e. by instancing another Perch template:

<template id="sidebar_template1">
<script>
var sidebartemplate1,sidebarclone1,sidebarhost1;
var scenario;
</script>
<style>
.page .sidebar{display:none;}
@media(max-width:767px){.sidebar{display:block;margin:1rem .25rem 0 .5rem;}}
@media(max-width:479px){.sidebar{display:none;}}
</style>
<div class="<perch:content id="sideclass"/>">

</div>
</template>

<div id="sidebar1"></div>

<script>
sidebartemplate1=document.querySelector('#sidebar_template1');
sidebarclone1=document.importNode(sidebartemplate1.content,true);
sidebarhost1=document.querySelector('#sidebar1');
sidebarhost1.appendChild(sidebarclone1);
</script>

I get a <div></div> with an empty class and in Perch I get a fillable field.

I'm wondering if anyone has any experience using HTML5 templates with Perch, since it would be very nice to be able to integrate the two properly, without having to use !important rules throughout my markup.

I am using perch_content_custom() and perch_content_create() if that makes any difference.

Thanks for any help or assistance.