Search code examples
polymerweb-component

The right way to do html imports with Polymer elements?

Say, I have element A and B. The imports in B are:

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

Now I want to use B in A. What is the "right" way to import B? Should A just import B like this?

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

Or should A also import all the imports used by B like the following?

<!-- 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">

If Google's own Polymer Elements can be of any guidance, the answer appears to be Method 2, i.e. importing all dependent htmls. But if that is the case, the "import" syntax in Polymer/WebComponents seems to break encapsulation for no obvious reason. For example, here is the "paper-dropdown-menu" element from Polymer:

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

It imports "paper-input.html", which has its own imports:

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

The following 2 imports are used in both elements:

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

If paper-dropdown-menu.html already imports paper-input.html, why does paper-dropdown-menu have to import polymer.html and iron-form-element again? The problem with this is that the imports can get out of control very quickly when composing an app with many elements. Yes, I know Vulcanize. But I don't see how that helps the development process when one is creating or using an element. In addition, encapsulation means A shouldn't need to know the internal parts of B in the example above. Or is Polymer/Webcomponent really saying that html imports in a component are part of the "public interface" of that component?

Solution

  • Just import the elements you directly depend on. You can ignore transitive dependencies because they are imported in the elements you import directly anyway. In addition each element should import <link rel="import" href="../polymer/polymer.html">.