Cant run an IIFE inside a template

html, html5-template, javascript

Solution

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>

Problem

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> ```

Original source