polymer Using external Javascript Libraries with Polymer
Introduction
Since all Web Components must be self-contained, including all their dependencies, duplicated dependency import would quickly become an issue with script includes. Thus, Web Components (and, by extension, Polymer) use W3C HTML imports for managing component dependencies. These imported HTML files can be cached by the browser and will only be loaded once.
Most external libraries are not yet prepared for HTML imports. Fortunately creating the necessary HTML wrapper is quick and straight forward.
Parameters
| Parameter | Description |
|---|---|
| this.resolveUrl('../libraries/turf.js') | Resolves the location of your library |
| function() {this.doSomething(argument, anotherArgument);}.bind(this)); | Callback. This example uses a closure to recurse this.doSomething() |
Remarks
In this example, the library used in the component is installed with the package manager bower. This allows for easy distribution of a library-dependent component. If the library you wish to use is not distributed via a package manager, it can still be loaded the same way but your component will be require more effort to be used by others.
The lazy loading example uses a simple string for the library path. If one wished to avoid magic string constants, paths could be loaded using iron-ajax from a JSON file into an object and passed between components if needed.
