rel="import" 未来的HTML模板引入方式

把HTML模板做成单独的文件有利于复用和缓存，前面两篇文章就是在推荐这种做法的。但我们一直都通过传统的方式来实现，需要各种模拟。抛开这些问题去看的话，实际上在WebComponents草案里引入了rel="import"的LINK标签，它就是用于载入外部HTML资源的。

目前这个特性只有在Chrome中手动开启flag的情况下才能勉强支持

LINK[rel=import]其实有点类似于IFRAME，它引用的对象也是一个完整的文档，而不是文档片段，而且里面的SCRIPT也会执行，对跨域的资源访问同样有同源策略的限制。

console.log(tmp.import.body.innerHTML);

test

console.log("a.html");

但和IFRAME不同的是，它和父文档的关系更密切。它自身确实是一个文档，可以通过link元素上的import属性访问，但在其内部的代码中，如果访问document则等同于访问父文档。这是很奇怪的设定，虽然内部的元素与父文档不在一个DOM树上（父文档上querySelector无法找到内部的元素），但他们却共用一个document对象，甚至共用一个全局环境。这意味着STYLE或SCRIPT之类的标签所执行的结果会影响到容器。

这个文字是红色的

varg="global";

body {color:red;}

test

console.log(tmp.ownerDocument==document);//true

console.log(tmp.ownerDocument.defaultView==window);//true

console.log(document.querySelector("h1"));//null

console.log(g);//"global"

https://www.web-tinker.com/article/20637.html