什么是 Web Components
Web Components 是一套用来实现可重用组件的 API。它由几个不同的技术组成：Custom Elements、Shadow DOM、HTML Templates 以及 HTML Imports。这些技术都是标准化的 Web 平台 API，可以在所有支持 Web 平台的浏览器中使用。
什么是 HTML Imports
HTML Imports 是 Web Components 中的一个成分。它提供了一种方法来导入 HTML 文件中定义的自定义元素、样式和脚本。
使用 HTML Imports，可以创建一个包含页面多个模块的 HTML 文档。每个模块可以定义自己的 HTML 元素和样式，在需要的时候可以通过 HTML Imports 引入。
如何使用 HTML Imports
基本语法
使用 HTML Imports 很简单，只需要在 HTML 文件的 head 标签中添加 link 标签即可：
<head> <link rel="import" href="path/to/your-element.html"> </head>
注：path/to/your-element.html 表示你需要引入的 HTML 文件路径。
自定义元素
使用 HTML Imports，除了能够引入样式和脚本之外，还可以引入自定义元素。
下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ------------ ---------------------------------
-------
------
-----------------------------
-------
-------your-element 是我们自己定义的元素，你可以在你的项目中自定义你需要的元素。
JavaScript
HTML Imports 还可以引入 JavaScript 代码文件：
<script src="path/to/your-script.js"></script> <link rel="import" href="path/to/your-element.html">
你可以在你的 JavaScript 文件中，通过自定义元素的方式调用你需要的 API。
样式
使用 HTML Imports，还可以引入样式文件：
<head> <link rel="import" href="path/to/your-element.html"> <link rel="stylesheet" href="path/to/your-styles.css"> </head>
上面代码中，引入了两个文件，一个是自定义元素的文件，一个是样式文件。
总结
HTML Imports 是 Web Components 中的一个成分，它可以用来导入 HTML 文件中定义的自定义元素、样式和脚本。使用 HTML Imports，可以创建一个包含页面多个模块的 HTML 文档。
例如，你可以创建一个包含多个独立模块的页面，每个模块有自己的样式和 JavaScript，需要的时候可以用 HTML Imports 引入。
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ------------ ---------------------------------
----- ---------------- -------------------------------
------- --------------------------------------
-------
------
-----------------------------
-------
-------注：Path/to/your-element.html 表示自定义元素所在的 HTML 文件路径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae215948841e9894a1d6b1