如何在没有Html-Imports的情况下打包或导入Html-Templates

Question

由于Html-Imports现已在Chrome(https://www.chromestatus.com/feature/5144752345317376)中弃用,并且将被删除,我想知道其他选择是什么.

我目前正在使用Html-Imports导入Html模板.到目前为止,我只看到两种选择:

• 将所有HTML文件捆绑在一个文件中.这也会改善生产中的下载时间,但这会减少封装和模块化.有一个聚合物捆绑器可以通过在分离的HTML文件中遍历HTML-Import-Statements来完成这项工作.但这意味着,HTML-Imports仍然存在于我的代码中,即使将来任何浏览器都不支持它.
• 使用XHttpRequests构建某种模块加载器,并在运行时将模板编织到一个HTML文件中.这将保留封装和模块化,但这对我来说有一个难闻的气味,因为我基本上会自己重建import-Statements.

是否有一种新的香草方式来导入Html模板？(通过"vanilla"我基本上意味着没有任何其他工具,如预编译器或捆绑器参与)

Answer 1

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

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

使用异步/等待：

    async function getTemplate(filepath) {
        let response = await fetch(filepath);
        let txt = response.text();

        let html =  new DOMParser().parseFromString(txt, 'text/html');
        return html.querySelector('head > template');
    }

基于承诺：

    function getTemplate(filepath) {
        return fetch(filepath)
            .then(response => {
                let txt = response.text();
                let html = new DOMParser().parseFromString(txt, 'text/html');

                return html.querySelector('template');
            });
    }   

两者都可以通过以下两种方式调用：

异步/等待：

    let tpl = await getTemplate('path/to/template.html');

承诺：

    getTemplate('path/to/template.html')
        .then(function doSomething(tpl) {
            // Put your code here...
        });

生成的代码非常简单，可以通过多种方式轻松实现。事实上，我有一个小的 SuperClass 来为我处理它，我所有的自定义元素都继承自它。您可以改用 mixin，我过去也这样做过。

艰苦的工作只是颠倒顺序，即使这样也不是很困难，除非您使用了 1000 个组件。它可能只需很少的工作就可以实现自动化。