HTML5 之 Template

兼容性检测

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // 检测通过！
} else {
  // 使用旧的模板技术或库。
}

HTML4 hidden DOM

DOM 并使用 hidden 特性或 display:none 来将其从视图中隐藏

• 使用 DOM——浏览器了解 DOM。它们擅长处理它。我们可以轻易的复制这些 DOM。
• 没有内容渲染——增加 hidden 来阻止区块的显示。
• 非惰性——即便内容是隐藏的，当仍然会发起图片请求。
• 难以设置样式和主题——嵌入页面需要为所有 CSS 规则增加 #id 前缀，以此来将样式限定在模板范围内。这种做法无法确保未来可能出现的命名冲突-

HTML4 重载脚本

重载

• 没有内容渲染——浏览器不会渲染该块，因为

  从模板中生成 Shadow DOM

  
  
  
    
  Instructions go here
  
  
  
  

  注意事项

  • 注意嵌套模板, 激活外层模板不会激活内层模板, 内层模板需要手动激活
  • 模板无法预渲染, 无法预加载, 只能在激活后被渲染

  参考

  • HTML's New Template Tag