如果 HTML 导入已失效/已弃用，那么导入 Web 组件（X-Tag）模板的最佳方式是啥？

Posted 2023-02-19

【中文标题】如果 HTML 导入已失效/已弃用，那么导入 Web 组件（X-Tag）模板的最佳方式是啥？

【英文标题】：If HTML Imports are dead/deprecated what's the best way to import your web component (X-Tag) template?如果 HTML 导入已失效/已弃用，那么导入 Web 组件（X-Tag）模板的最佳方式是什么？

【发布时间】：2016-09-17 15:36:10

【问题描述】：

我正在开发我的第一个 X-Tag 应用程序，在它的页面上它说它可以使用 Web 组件 API，例如“自定义元素、Shadow DOM、模板和 html 导入”。

我已经开始处理我的模板了，但是既然 HTML 导入已被弃用，那么导入它们的最佳选择是什么？

【问题讨论】：

你的目标浏览器是什么？

Chrome 和 Firefox 的最新版本。

查看 HTML 模块 github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/… 和 groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… 和 github.com/w3c/webcomponents/blob/gh-pages/proposals/… 以及 github.com/w3c/webcomponents/issues/645 的背景讨论以及 github.com/w3c/webcomponents/issues/783 的一些问题讨论

【参考方案1】：

2019 年更新

HTML 导入的原生实现将从 Chrome 73 中移除，因此现在建议使用原生 fetch() 或第三方库。

过时的答案

AFAIK，HTML Imports 尚未被弃用（或者它是新的？）。只有 Mozilla 表示不会为 Firefox 实现它。但polyfill 仍然可用并受支持。

由于ES6 Modules 尚未实现，我想说 HTML 导入仍然是最佳选择（这是我选择的那个），因为它们非常易于使用且运行良好（Polymer 广泛使用它们）。

相反，您可以尝试RequireJs 或实现您自己的模块加载器（使用XMLHttpRequest）。

我不建议您使用 ES6 Module Loader polyfill，因为它们仅处于实验阶段。

【讨论】：

Mozilla 有记录称他们不打算实现当前指定的 HTML 导入，Apple 表示如果他们实现任何用于声明性 HTML 导入的东西，直到 ES6 之后模块已部署，我们有一些经验可以借鉴。更多的一些讨论，见w3.org/2015/10/26-webapps-minutes.html#item06

HTML 导入实际上已经死了。如前所述，Mozilla won't implement 他们和 Chrome 也 deprecated 他们并将在下一个版本 (73) 中删除该功能。

能否提供一个如何替换 html 导入的示例？

或这个带有等待/异步的极简示例：***.com/a/58136110/4600982 或 ***.com/a/56998095/4600982

您确实需要更新此内容，否则可能会给初学者带来误导性信息。谢谢。