使用多个聚合物元件时如何避免重复导入聚合物？答案

【问题标题】：How to avoid repeated polymer imports when using multiple polymer elements?使用多个聚合物元件时如何避免重复导入聚合物？
【发布时间】：2018-01-13 23:16:15
【问题描述】：

我是聚合物 2 的新手，看来，要加载聚合物元素，您需要导入一个 html 文件，其中包含以下 3 个 html 导入：

1. the polyfill
2. the main polymer element class
3. and then potentially extras like iron-input.html or dom-repeat.html

如果我随后将 5 个不同元素的 5 个聚合物元素 html 文件导入到我的主页中，我将获得上述 3 个导入的 5 倍。您如何避免所有这些重复以及大量导入 DOM？

我应该手动从 5 个文件中删除所有导入语句吗？每个只保留 1 个？

https://www.polymer-project.org/2.0/start/quick-tour

谢谢

【问题讨论】：

标签： javascript polymer

【解决方案1】：

这些都不是必需的，因为 HTML 导入是按设计进行重复数据删除的。

这意味着任何出现的<link rel="import" href="polymer.html"> 只会被浏览器下载一次。

顺便说一句，大多数导入的 HTML 不会直接包含 HTML，而是包含脚本和HTML templates。然后使用这些模板创建要插入页面的实际 HTML 内容。最值得注意的是，这些模板定义了自定义元素的外观。

您将看到这些部分如何全部到位以创建 Web 组件规范：

自定义元素定义网络组件的构建块
自定义元素的行为和外观已定义（粗略地说），但 HTML 模板和脚本
这些脚本作为独立的 HTML 文件分发，与 HTML 导入一起使用

【讨论】：

即使下载一次，问题是代码是插入到每个标签的DOM中吧？
如何插入到DOM中？
我实际上是在做一些测试，我发现当你导入一个 html 文件时，它所能做的就是评估它所做的任何 html 导入并运行脚本，但它没有添加任何到 dom 的常规 html。对吗？
因此，如果您导入的 html 文件有
hello
，您不会在页面上看到 hello。
不，它没有。很像添加<script src="code.js"> 不会将code.js 的内容直接插入到页面中