把HTML模板做成單獨的文件有利于復(fù)用和緩存稚配，前面兩篇文章就是在推薦這種做法的楞卡。但我們一直都通過傳統(tǒng)的方式來實現(xiàn)唆樊，需要各種模擬宛琅。拋開這些問題去看的話，實際上在WebComponents草案里引入了rel="import"的LINK標(biāo)簽逗旁，它就是用于載入外部HTML資源的嘿辟。
目前這個特性只有在Chrome中手動開啟flag的情況下才能勉強支持
LINK[rel=import]其實有點類似于IFRAME，它引用的對象也是一個完整的文檔片效，而不是文檔片段红伦，而且里面的SCRIPT也會執(zhí)行，對跨域的資源訪問同樣有同源策略的限制堤舒。
console.log(tmp.import.body.innerHTML);
test
console.log("a.html");
但和IFRAME不同的是色建，它和父文檔的關(guān)系更密切。它自身確實是一個文檔舌缤，可以通過link元素上的import屬性訪問箕戳，但在其內(nèi)部的代碼中，如果訪問document則等同于訪問父文檔国撵。這是很奇怪的設(shè)定陵吸，雖然內(nèi)部的元素與父文檔不在一個DOM樹上（父文檔上querySelector無法找到內(nèi)部的元素），但他們卻共用一個document對象介牙，甚至共用一個全局環(huán)境壮虫。這意味著STYLE或SCRIPT之類的標(biāo)簽所執(zhí)行的結(jié)果會影響到容器。
這個文字是紅色的
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
