HTML 模板的跨浏览器导入

Question

我已经检查过，这里有 "similar" 个问题，但我想排除 Google 的 WebComponents polyfil，而且自 2015 年的大部分讨论以来，时间已经过去了，大多数重要的是，Javascript 模块似乎已经排除了提供 "import" 模板功能的可能性。（坚持仅从其他模块导入 VAR、函数和对象）

所以对于我的问题：-

"What is the suggested/best cross-browser solution for importing/including HTML Templates?"

我认为 Chrome 的 <LINK TYPE="IMPORT"> 在功能方面没有任何问题，但不幸的是 Safari、Firefox 和 Edge 似乎已经排除了它:-(

那么下一个最好的是什么？

XHR2 responseType="document?

XHR type="text/html" 
document.createElement("template").innerHTML = responseText
document.headd.appendChild(newTemplate);
?

<script id="storeStringsHere></script> ?

还有什么吗？

ShadowDOM V1.0、模板、模块，甚至自定义组件看起来都符合标准。（这太棒了！）但是 HTML 导入被黑球 we/I 需要一个替代的跨浏览器解决方案。请帮忙。

为什么 LINK 适用于 CSS 但不适用于模板？

Answer 1

由于没有本地解决方案，使用 HTML 导入（本地或 polyfilled）是一种与任何其他解决方案（XMLHttpRequest、fetch、其他 JS 库）一样好的解决方案将模板导入为 HTML 个文件。

无论如何 HTML Imports polyfill，像任何其他 Module Loader JS 库一样，在木头下使用 XMLHttpRequest。所以不要将其视为 polyfill，而应将其视为另一个 JS 模块加载器。

或者，您可以使用 XMLHttpRequest（或 fetch）实现自己的模块加载器。几行代码而已。

HTML 模板的跨浏览器导入

Cross Browser Import for HTML Templates

html

javascript

web-component

shadow-dom