原生模板的优势

延迟了资源加载

延迟了加载和处理模板所引用的资源的时机,这样,用户就能够在模板中使用任意多的资源,却不阻碍页面的渲染。

延迟了渲染内容

无论模板在什么位置,浏览器不会把模板中的内容直接渲染出来。开发者可以将模板放在页面中的任意位置,然后根据具体的情形选择模板去渲染,而不必切换模板的display属性,或者担心由于解析不需要的模板内容而带来的开销。

从DOM中隐藏内容

模板中的内容并不能视为DOM的一部分,当我们查询DOM节点时,绝对不会返回模板的节点。这样,模板就不会拖慢DOM节点的查询速度。模板终点内容在激活之前都可以视为隐藏的。

原生模板的用法

在<template>标签中编写模板,编写好的模板可以被插入到head body frameset等标签中,或者他们的任意后代标签中。

<head><templateid=“actq”><pclass=“response”></p><scripttype=“text/javascript”>(function(){var p=confirm(“tip?”)var responseEl = document.querySelector(.response)if(p){ responseEl.innerHTML =success}else{ responseEl.innerHTML =fail}})();</script></template></head><body><divid=“atcq-root”></div></body>

使用模板时,将模板内容插入到DOM中即可。

首先获得对模板节点的引用
var template = document.querySelector(“#atcq”)

然后创建Shadow DOM,之后将模板中的内容填充到根元素中

var root = document.querySelector(“#atcq-root”).createShadowRoot()

root.appendChild(template.content)

Shadow DOM简介

shadow-dom 其实是浏览器的一种能力,它允许在浏览器渲染文档的时候向其中的 Dom 结构中插入一棵 DOM 元素子树,但是特殊的是,shadow DOM 子树并不在主 DOM树中。这颗子树形成了自己的『闭合空间』,比如shadow DOM子树可以包含与父文档中重复的ID和样式,而不会相冲突。

参考

Shadow DOM v1:独立的网络组件影子DOM

发表回复

您的电子邮箱地址不会被公开。