爲什麼使用<script>元素作爲模板比其他元素更受歡迎？

Question

我剛剛嘗試過使用<style>標記可以做與<script>標記所做的完全相同的事情，如果有人需要模板。但是我找不到有關使用<style type="text/x-template">的任何使用方法。

所以，我的問題是...爲什麼<script>是首選？任何歷史原因或瀏覽器兼容性原因？

這裏是一個演示：

(function() { 
 
    let output = document.getElementById('output'); 
 
    let template = document.getElementById('template'); 
 
    let dom = document.createElement('div'); 
 
    dom.innerHTML = template.innerHTML; 
 
    dom.getElementsByClassName('todo')[0].textContent = '42'; 
 
    output.appendChild(dom); 
 
}());

<style id="template" type="text/x-template"> 
 
<div>This is from template!</div> 
 
<div class="todo"></div> 
 
<div>This is from template too!</div> 
 
</style> 
 
<div>something before output:</div> 
 
<span id="output"> 
 
</span>

Answer 1

大的問題，但我不覺得孤單了，一個偉大的答案。

這些模板通常由JavaScript代碼進行讀取和處理。因此，與使用CSS的<style>標記相比，使用<script>標記識別它們更有意義。

現在您可以使用template tag as described here。

很遺憾IE 11 still doesn't support it, but the rest of browser support is pretty good