本文介绍了HTML Templates的概念和作用，它允许在不渲染的情况下存储页面内容，以供JavaScript在运行时实例化。文中详细讲解了Template的content属性，以及如何通过JS操作Templates将内容插入到DOM中，同时讨论了其兼容性问题。通过学习，读者能够掌握如何有效地利用Templates提高Web组件的开发效率。
前言
在之前介绍创建 Custom Elements 的代码中，有一个地方是比较繁琐的：Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的。就像下面这样的：
那到底有没有方法能简化这一步操作呢？答案是有的，就是我们今天要介绍的主角 —— Template。
Templates 的概念
引用 MDN 上的原话是：
HTML内容模板（
<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用 JavaScript 实例化。将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理**
<template>**元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
通过这个概念解释，我们可以知道关于 Templates 的以下几点：
- 它是在 HTML 页面中使用的一组元素标签，即
<template></template>； - 它在 HTML 页面解析的过程中会被处理，但不会呈现在页面上；
- 它可以被 JavaScript 获取到。
Templates 是较早之前出现的，比 Web Components 更早。
Templates 的属性
Templates 除了全局属性（也就是所有 HTML 元素所共有的属性）外，只有一个私有属性 ：content，这个属性是只读的，返回 Templates 内部的文档片段对象及其 DOM 结构。
在控制台操控一下template，结果如下：
我们可以将 templateEle.content 当做一个正常的
最低0.47元/天 解锁文章
扫一扫
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
