javascript - HTML 模板的跨浏览器导入

Question

我已经检查过，这里有“类似”的问题，但我想排除 Google 针对 WebComponents 的 polyfil，而且自 2015 年的大多数讨论以来，时间已经过去了，最重要的是，Javascript 模块似乎已经排除了自己提供“导入”模板功能。 (坚持仅从其他模块导入 VAR、函数和对象)

所以我的问题是:-

“导入/包含 HTML 模板的建议/最佳跨浏览器解决方案是什么？”

我认为 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 导入被黑，我们/我需要一个替代的跨浏览器解决方案。请帮忙。

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

Answer 1

由于没有 native 解决方案，因此使用 HTML 导入( native 或填充)是一种与任何其他解决方案(XMLHttpRequest、fetch、其他 JS 库)一样好的解决方案将模板导入为 HTML 文件。

无论如何HTML Imports polyfill与任何其他 Module Loader JS 库一样，木有使用 XMLHttpRequest 。因此，不要将其视为一个 polyfill，而只是另一个 JS 模块加载器。

或者，您可以使用 XMLHttpRequest (或 fetch)实现您自己的模块加载器。只需几行代码。