javascript - 无法在模板内运行 IIFE

Question

我正在使用一个<template>元素，但其中的 javascript 代码不会运行。我正在使用 IIFE 让它立即运行，但没有运气。

<div id="content">
  initial text
</div>

<template>
  <script>
    (function(){
        document.querySelector('#content').innerHTML = 'new text';
    })();
  </script>
</template>

Answer 1

模板内容不会呈现到 DOM，因此脚本不会运行。

来自文档（第一段）：

HTML 元素是一种用于保存客户端内容的机制，这些内容在页面加载时不会呈现，但随后可能会在运行时使用 JavaScript 进行实例化。

编辑
根据您对如何运行代码的评论，有几种方法。最简单的是抓取它的内容并将其放入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>