HTML Imports被拒绝，弃用和删除的原因是什么？

TLDR：浏览器制造商基于什么特定理由拒绝，弃用并删除HTML导入？


这是我（四个小时前）：

显然，我一直生活在一块石头下，因为直到今天，我才发现一种令人震惊的令人震惊的网络创新技术：

HTML Imports-#Include for the Web（2013年11月）

土耳其。 2013年11月？距今已有50多年了！

HTML导入？！真？！

这是我自2000年代初以来一直希望看到的东西！

哇，看看这个：<link rel="import" href="/document-to-import.html">

这看起来真是太神奇了。让我们看看是否还有其他文章涉及这种闻所未闻的创新...

::：从搜索引擎中提取不少于39篇讨论HTML导入的文章。 ::

哇...好多东西要读。 （39页！没有在开玩笑！！）每个人似乎都知道这件事。一半的世界似乎已经写了这是什么令人兴奋的新创新。 （无论如何，都是2013年的创新...）我从未听说过HTML Imports？

不是Firefox ...吗？让我看看...

::运行以检查我可以使用HTML导入:::

Ahhhhhh。我懂了。从未在Firefox中实现。 （或在Safari中）。


我现在到处都读到关于不推荐使用HTML导入的内容？要在Chrome 80中删除（2020年1月）？哇？！不！否-我只是发现了这一点！

该功能就在“我可以使用HTML导入”上。在Chrome和Opera上。而且-看！ -它也刚在Edge上开始！

看吗？未弃用！甚至Edge现在都将支持HTML导入！它肯定不能被弃用吗？越来越多的浏览器正在支持它！


哦。不挂断。 Opera现在不使用WebKit代替Presto吗？

::检查::

啊。对。 Opera使用眨眼浏览器引擎。与Chrome相同。所以Opera仅因为Blink才支持HTML导入。

嗯。

那是什么？

::再次检查:: br />哦。 Edge 79基于Chromium79。因此Edge现在也使用了Blink Browser Engine。与Chrome相同。因此Edge仅因为Blink才支持HTML导入。

因此，基本上没有浏览器引擎支持HTML导入。除了Blink。

，甚至在Chromium 73中，Blink也已弃用HTML导入。


WebKit不支持。 > EdgeHTML从不支持。
Gecko不支持。

现在Blink删除了HTML Imports。


过山车。

2个小时内可以享受6年的娱乐。 /> <link rel="import" href="/document-to-import.html">

我看不到Safari的任何响应，但也看不到那个角落的任何明显热情。

但是，在浏览网络后，我仍然找不到在任何地方阐明反对，拒绝，弃用和删除HTML导入的原因。
问题：

浏览器制造商基于什么特定理由拒绝，否赞成并删除HTML导入？

评论

据我了解，这只是实验性的，后来不推荐使用，现在已经过时了。主要是由于供应商。在这里有趣的阅读：hacks.mozilla.org/2015/06/the-state-of-web-components

---

谢谢@BronwynV-这是一个有用的参考。我已经做了更多的探索，并且我已经看到，早在2016-17年，HTML模块就被提议作为HTML导入的潜在继任者：Web组件问题和HTML：Imports-and-ES-Modules。

---

进一步：HTML模块在2019年仍在讨论中，此处：HTML模块，此处：实施意图：HTML模块，此处：HTML模块设计文档以及此处：HTML模块解释器。

---

只需为将来的互联网搜索添加关键字-包含在内。

---

我同意SE问题应在问题正文中包含所有相关信息。我之所以没有解释“ HTML导入”一词，是因为我认为“自我解释”一词是一种使Web文档能够导入HTML的技术。如果那不是立即显而易见的，我很乐意为上述问题添加解释性说明。

---

#1 楼

在阅读了几篇有关此内容的文章之后，普遍的共识是HTML导入是多余的，因为您仍然需要JavaScript才能使它们生效（它们不仅会自动将其自身添加到文档中，如果您使用“包含”一词，那会产生误导将其与其他语言中通常的含义进行比较。）

来自@Bronwyn链接的文章：


如前所述，Mozilla目前不打算实现HTML导入。这部分是因为我们希望在发布另一种导入外部资产的方式之前先了解ES6模块是如何推出的，部分是因为我们不认为ES6模块能够实现很多不可能的事情。

我们在Firefox OS中使用Web组件已经一年多了，发现使用现有的模块语法（AMD或Common JS）来解析依赖关系树，注册元素，使用常规标签加载似乎足以获取东西完成。

Web组件的状态-Mozilla Hacks


因此，简而言之，它们并没有真正使您能够做任何您做不到的事情使用现有的JS模块。

#2 楼

Nota Bene：
HTML导入作为一种独立技术已被弃用，但事实证明其基本概念并未被放弃。 HTML模块还可以成功实现。
以下是W3C中介绍HTML模块的两个非常易读的文档：模块解释器-W3C

第一个文档详细介绍了HTML导入引发的特定问题，并揭示了HTML模块如何解决这些问题。
HTML导入的特定问题包括：


解析障碍：在<script>声明之后引用的任何<link rel="import">必须等待导入的HTML完全下载，这会阻碍解析并延迟下载其余主要文档。 br />全局命名空间冲突：在HTML导入中声明的任何JS变量都将与在主声明中声明的同名JS变量冲突文档


第二个文档更详细地讨论了HTML模块如何在实践中工作。

有关HTML模块提案的更多信息：


HTML模块-Chrome平台状态

实施意图：HTML模块-闪烁开发讨论

HTML模块设计文档-MSEdge解释器


结论：
HTML Imports背后的概念并不是什么坏事。
仅仅是实现体系结构-最初于2011年开发，很久以前ES6模块已完成-已证明远非最佳，尤其是考虑到最近更复杂的技术的发展。

#3 楼

基于什么特定的理由，浏览器制造商拒绝，弃用并删除了HTML导入？


好问题。但是事实证明，有关删除HTML导入的担忧可能基本上无关紧要。

如何？

我们可以认识到，目前尚无官方规范将HTML导入HTML目前，因为：


HTML导入的官方规范已被拒绝，弃用和删除

HTML模块-在某些时候可以替换HTML导入-仍在开发中

，但这要比最初看起来要重要，因为不赞成使用非官方的，很大程度上未记录文档的HTML导入方法。 （可以说永远不能弃用或删除它。）


“ HTML导入已死。html导入寿命很长！”


什么？！

事实证明（谁知道？）-即使没有正式的规范-绝对可以使用现代的标准技术（HTML + JS）将HTML导入当前的HTML文档。 >
以下技术尚无正式名称（目前尚未获得广泛认可），但由于它使用了以下三种标准且已久的技术：



<object> / <iframe> HTML5元素

.contentDocument属性

before() / insertBefore()方法

它将保持可靠的技术，直到HTML模块都是很好的选择。


使用<object>或<iframe>作为帮助程序导入HTML

斯科特·杰尔（Scott Jehl）出色地记录了这种4步骤技术： >


HTML包括今天有效的内容（2019年4月）
使用两个HTML5元素（<object>或<iframe>）中的任何一个作为中间帮助程序，都可以相同（并且效果很好）。

1）我们可以通过这两个元素中的一个显示一个html文件：

<object data="/my-html-import.html"></object>

<iframe src="/my-html-import.html"></iframe>

2）加载辅助元素（<object>或<iframe>）后，我们可以到达内部，提取contentDocument并将其添加到元素之前的父文档中，使用：

this.before(this.contentDocument.body.children[0]);

3）然后，可以使用以下方法从文档中删除helper元素：

this.remove();

4）作为补充，可以将helper元素设置样式，使其永远不会在视口中首先呈现，使用以下方法：

display: none;

将所有内容放在一起（使用样式和脚本作为内联属性），可以为我们提供：

<object data="/my-html-import.html" style="display: none;" onload="this.before(this.contentDocument.body.children[0]); this.remove();"></object>

<iframe src="/my-html-import.html" style="display: none;" onload="this.before(this.contentDocument.body.children[0]); this.remove();"></iframe>

一旦辅助元素完成其onload属性中的javascript运行，外部html将被成功导入到当前HTML文档中，并且不再存在

结果：HTML导入。


其他注意事项：

上面的演练使用以下方法构造辅助元素内联样式属性和内联事件侦听器属性。但是，如果我们需要将结构与表示与行为分离开来，我们可以将上面的自包含元素直接转换为实现不引人注意的CSS和Javascript的设置：

HTML：

<object class="html-import-helper" data="/my-html-import.html"></object>

或

<iframe class="html-import-helper" src="/my-html-import.html"></iframe>

CSS：

.html-import-helper {
  display: none;
}

Javascript：

const htmlImportHelper = document.getElementsByClassName('html-import-helper')[0];

const importHTML = (e) => {
  e.target.before(e.target.contentDocument.body.children[0]);
  e.target.remove();
}

htmlImportHelper.addEventListener('load', importHTML);