【HTML】模板元素（`＜template＞`标签）的特点与使用方法

模板元素（template标签）的特点与使用方法

提要

在我接触到的各种js框架(lwc，vue，react)中，都或多或少使用到了模板元素(<template>)，最近在阅读React源码的过程中，也看到这样的注释：

’ Warning: Encountered a script tag while rendering React component. ’ +

​ 'Scripts inside React components are never executed when rendering ’ +

​ 'on the client. Consider using template tag instead ’

我们知道，react组件在渲染的时候是不会执行任何script代码的，这对防注入等安全问题有好处。在源码的注释中它提示到，如果要执行Script代码，建议放在template元素内部。本文就为大家介绍一下template标签的具体作用以及使用方法。

什么是<template>元素

<template>元素，中文称为模板元素，顾名思义，它最大的作用是将元素标签内的所有元素作为模板储存在HTML文件中。并且，浏览器会忽略模板元素的内容，仅检查它内部语法的有效性。我们可以在合适的时候，利用JavasScript来访问、使用模板元素来创建内容。

优势

如果为了不可见性，我们可以用其他方式，如visibility: hide或者display:none等样式，为什么要使用模板元素呢？

1. 模板元素的内容可以是任何HTML

   <template>
      <tr>
      	<div>
        <td>Contents</td>
        </div>
      </tr>
   </template>
   

   如果不是包含在模板元素中，上述的<tr>标签会被浏览器自动包裹在一个<table>标签内，且<div>标签也会被认为无效而自动修复。但是在模板元素中，所有的内容会被原封不动地保存。

2. <template>的内容不在文档中。
   直到被查看、使用之前，模板元素的内容都被认为不在文档里，因此所有的样式、Script代码也不会被应用、运行。这也是React注释中推荐的方式 —— 利用文档元素储存Script代码，直到它被使用之后自动执行。

使用方式

模板元素的使用方式很简单，在JS中抓取模板元素的内容，并且将他插入到某个节点中。
模板元素的content属性可以看作是一个文档片段（DocumentFragment），在模板元素被插入时，仅仅只有模板元素的内容会被插入。（<template>标签会被无视）

<table id="producttable">
  <thead>