如何在没有Html导入的情况下打包或导入Html模板

Question

由于Html-Imports现在在Chrome (https://www.chromestatus.com/feature/5144752345317376)中已被弃用，并将被移除，我想知道替代方案是什么。

我目前正在使用Html-Imports来导入Html-Templates。到目前为止，我只看到两种选择：

将所有HTML文件捆绑在一个文件中。这也将改善生产中的加载时间，但这将减少封装和模块化。有一个聚合物捆绑器，它可以通过遍历独立的HTML文件中的HTML-Import语句来完成这项工作。但这意味着，即使将来任何浏览器都不支持HTML导入，它们也会保留在我的代码中。

使用XHttpRequests构建某种类型的模块加载器，并在运行时将模板编织到一个超文本标记语言文件中。这将保留封装和模块化，但这对我来说有一种不好的味道，因为我基本上会自己重新构建import语句。

有没有一种导入Html模板的新方法？(我所说的“香草”基本上是指一种不需要任何额外工具的方式，比如预编译器或捆绑器)

Answer 1

HTML导入的弃用本质上改变了资源的加载顺序。自定义元素本质上已经变成了脚本优先，而不是模板优先。如果您的元素需要模板，请从脚本中加载它。如果没有，那就去工作吧。坦率地说，虽然我在最初的几周里对它有抵触情绪，但我已经开始喜欢它了。事实证明，加载外部资源并不是那么糟糕。

下面是从外部文件加载HTML模板的一些简单代码：

使用异步/等待：

基于Promise的：

这两种方法都可以通过以下两种方法调用：

异步/等待：

承诺：

生成的代码非常简单，只需很少的工作就可以以多种方式实现。实际上，我有一个小的SuperClass来为我处理它，我所有的定制元素都继承自它。您可以使用mixin，这也是我在过去做过的。

困难的工作就是颠倒顺序，即使是这样也不是很难，除非你使用的是数千个组件。它很可能是自动化的，只需很少的工作。