Question

我一直在阅读<template>标记上的文档，而我似乎无法理解它与仅使用<div>的{{1}}

display: none;示例

<template>

VS <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template>示例

<div>

在较低的层面上，浏览器如何以不同的方式处理这两个示例？
某些JS方法或HTML属性是否不同或不可用？

PS：我知道浏览器兼容性差异

Answer 1

考虑：

<template>
  <style>
    body: { background-color: black; }
  </style>
  <script>
    alert('hello');
  </script>
  <audio src="alert.wav" autoplay></audio>
</template>

和

<div style="display: none;">
  <style>
    body: { background-color: black; }
  </style>
  <script>
    alert('hello');
  </script>
  <audio src="alert.wav" autoplay></audio>
</div>

当浏览器呈现它们时，它们的行为是否相同？（剧透：没有。）

要解决您的具体问题，请：

在较低的层面上，浏览器如何以不同的方式处理这两个示例？

首先，<template>中的HTML不会成为<template>的子元素的DOM元素。它成为一个“惰性”DocumentFragment的子项（间接地;这是一种简化），它们作为节点存在但不“做”任何事情，如上例所示。

除了“惰性”外，模板内容没有“一致性要求”。您上面的<tr>示例很好。看看这里发生了什么：

const template = document.querySelector('template');
const div = document.querySelector('div');

console.log('template.innerHTML is', template.innerHTML);
console.log('div.innerHTML is', div.innerHTML);

<template>
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

<div style="display: none">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</div>

在普通文档中，<tr>不能是<div>的子项，因此浏览器会将其删除。在<template>中，该要求不存在。你可以找到相同的，例如<div style="{{myStyle}}">。在文档中，浏览器会丢弃style属性，因为它的值无效;在<template>它不会。这就是<template>对模板有用的原因。

如果您想了解有关如何呈现<template>的更多信息，建议您阅读section about it in the HTML spec。阅读并不容易，部分可能难以理解，但你可以学到很多东西。

某些JS方法或HTML属性是否不同或不可用？

<template>元素具有content属性，该属性指向上面讨论的DocumentFragment。

Answer 2

JS中的任何选择器都无法找到println(Foo::class.nestedClasses.size) //2内的元素，因此您无法意外地找到它们并提取它们，您必须使用<template>属性HTMLTemplateElement使用类似的内容：

content

此外，每个var clone = document.importNode(templateElement.content, true);，<style>或<audio>/<video>/...都会在页面加载时进行解析，但在您将其克隆到主DOM中之前不会运行。

Answer 3

我发现了一篇解释所有细节差异的文章： https://www.html5rocks.com/en/tutorials/webcomponents/template/

我现在意识到<div>示例实际上是在旧浏览器中使用的一种填充物，并且必须严格破解以使其按预期工作。

感谢大家的帮助。

浏览器如何处理<template>标记VS <div>标记

3 个答案: