I'm using a <template>
element but the javascript code inside it wont run. i'm using an IIFE to get it running immediately but no luck.
<div id="content">
initial text
</div>
<template>
<script>
(function(){
document.querySelector('#content').innerHTML = 'new text';
})();
</script>
</template>
Templates content doesn't render to the DOM, hence script wont run.
from the DOCS (first paragraph):
The HTML element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
EDIT
Following your comment on how to run the code, there are couple of ways. the simple one is grabbing it's content and drop it in the DOM
:
<div id="content">
initial text
</div>
<template>
<script>
(function(){
document.querySelector('#content').innerHTML = 'new text';
})();
</script>
</template>
<script>
var content = document.querySelector('template').content;
document.body.appendChild(content,true);
</script>