How to avoid repeated polymer imports when using multiple polymer elements?

[TheInvoker]

I am new to polymer 2, and it seems, to load a polymer element, you import a html file that has these 3 html imports:

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

If I then import 5 polymer element html files for 5 different elements, into my main page, I will have 5 times the above 3 imports. How do you avoid all that duplication, and massive import into the DOM?

Am I supposed to remove all the import statements from the 5 files manually? And just keep 1 of each?

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

Thanks

[web-padawan]

One of the core benefits of HTML imports is that browser de-duplicates them itself (and for Firefox, Safari and Edge polyfill handles this).
You can also use polymer-bundler tool for production to combine imports and decrease number of network requests, but that is optional with http 2.

[TheInvoker]

what do you mean de-duplicates?

[web-padawan]

I mean this quote from the spec:

If LOCATION is already in the import map:
Let IMPORT be the imported document for LOCATION and stop.

That said, browser won't load file imported from the same location twice.

[TheInvoker]

So does that mean if there was two html import statements with the same url, the first one will be loaded and the second one will be skipped?

[web-padawan]

Yes, it does. Hovewer, if you try loading same resource from different locations, e. g. from CDN, such imports won't be de-duplicated and this might result in errors.

[TheInvoker]

If you have something like this

<link rel="import" href="/imports/heart.html">
<link rel="import" href="/imports/heart.html">

does that mean the first one will download and insert the heart html into the page DOM, but the second one won't download (re-use from cache), but will insert the heart html into the DOM as well?

Also how can loading same resources but from different servers cause an error?

[web-padawan]

1. Import is not a piece of DOM in the sense that in does not get inserted automatically, you need script to access imported documents (so they are useless when user disables JS in browser).

2. Polymer usually uses HTMl imports to load Custom elements, and that spec has a restriction: attempt to re-declare already defined element leads to error mentioned here

For some insight on the future of this spec, especially in relation to ES modules, I strongly recommend reading the discussion on HTML modules proposal.

[web-padawan]

@TheInvoker if you still have questions about HTML imports, see this article. I also recommend taking a look at ES modules as a future for Polymer 3.0

[TimvdLippe]

Closing this per above comment. Thanks @web-padawan for the explanation, hopefully it is more clear now @TheInvoker 😄