I am new to components and attempting to implement some components into a new theme. My question is about best practice and at what scope it's best to include the files. Are there any advantages to loading them all in the index page for example, or should they be linked in and included when they are used? If I load them dynamically is there a possibility of them conflicting?
I hope this makes sense. Thank you ahead of time for any help.
Here there is a clear answer at webcomponents.org:
Normal HTML Imports are eager, meaning that they are loaded and evaluated in order first, before any code that follows. You can get a large performance improvement by lazily loading code at runtime, so that you only load the minimal amount of code needed to display the current view. This is a key piece of the PRPL pattern.
To do lazy loading of your HTML you can use javascript APIs like Polymer.importHref. What this repo adds to that is a declarative way to describe the resources that you will import lazily, and a method for loading them. Because this kind of lazy import is declarative, the polymer analyzer, polymer linter, and polymer bundler all understand them, giving you accurate lint warnings and sharded bundling without any configuration needed, just your source code. For remaining information go through : https://www.webcomponents.org/element/Polymer/lazy-imports