使用 Polymer 元素进行 html 导入的正确方法？

Question

说，我有元素 A 和 B。B 中的导入是：

<!-- Imports in B -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../another-element/another-element.html">

现在想在A中使用B，请问"right"导入B的方法是什么？ A 应该像这样导入 B 吗？

<!-- Imports in A: Method 1 -->
<link rel="import" href="../element-b/element-b.html">

或者 A 是否也应该像下面这样导入 B 使用的所有导入？

<!-- Imports in A: Method 2 -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../another-element/another-element.html">
<link rel="import" href="../element-b/element-b.html">

如果 Google 自己的聚合物元素可以提供任何指导，答案似乎是方法 2，即导入所有依赖的 html。但如果是这样的话，Polymer/WebComponents 中的 "import" 语法似乎没有明显的原因就破坏了封装。例如，这是来自 Polymer 的 "paper-dropdown-menu" 元素：

https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html

它导入 "paper-input.html"，它有自己的导入：

https://github.com/PolymerElements/paper-input/blob/master/paper-input.html

两个元素中都使用了以下 2 个导入：

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">

如果paper-dropdown-menu.html已经导入了paper-input.html，为什么paper-dropdown-menu还要导入polymer.html和iron-form-element？这样做的问题是，在编写包含许多元素的应用程序时，导入可能会很快失控。是的，我知道 Vulcanize。但我看不出这对创建或使用元素时的开发过程有何帮助。此外，封装意味着 A 不需要知道上面示例中 B 的内部部分。或者 Polymer/Webcomponent 真的是说组件中的 html 导入是该组件的 "public interface" 的一部分？

Answer 1

只需导入您直接依赖的元素即可。您可以忽略传递依赖性，因为它们无论如何都被导入到您直接导入的元素中。此外，每个元素都应导入 <link rel="import" href="../polymer/polymer.html">.

Answer 2

方法 1 是“更好”的方法。每个聚合物元素都应该捆绑自己的依赖项，因此它可以在使用时自行运行。

方法 2 不太好，您将 re-importing 两次导入元素 B，这会浪费带宽，尤其是当您不使用检查函数（如聚合物内置 importHref）时如果在再次获取之前已经导入了一个元素。

使用 Polymer 元素进行 html 导入的正确方法？

The right way to do html imports with Polymer elements?

web-component

polymer