Web Components, Polymer and SystemJS

Question

Does Polymer and/or native Web Components use ES6's SystemJS modules technology? https://github.com/systemjs/systemjs

Or do they rely on their own asset management?

Answer 1

Existing Web Components don't really use SystemJS but it's now possible to use it with systemjs-plugin-html to load HTML imports and circumvent the issues they have. SystemJS can redirect paths so that for example the same library expected in different locations can be redirected to the same file, and components can be more freely placed in different directories. Of course, this doesn't fix paths in the <link rel="import"> tags of existing components but new components can be created without them, while still more flexibly re-using existing components.

I've written an article with downloadable code and a working demo for how to use Polymer with SystemJS and TypeScript.

Answer 2

The Web Components specification is a set of four other specifications where one is about the HTML Imports technology. Web Components do not solve any module issues at a first glance. However, HTML Imports are the key to import components from anywhere into your app.

If you have componentA that imports a componentB and you import componentA into your web app, componentB is first imported and then componentA. So you kind of setup an implicit dependency tree that is resolved by HTML Imports automatically (which is why HTML Imports work asynchronously).

Answer 3

In short: no. They use HTML Imports to manage components.

Answer 4

No. In fact SystemJS modules are not support in browser yet. Currently polymer and x-tag use HTML import to load web component, but Mozilla rollback the HTML import support in nightly build and want to seek for SystemJS instead. (Eventually HTML import might duplicate once SystemJS is supported in browser).

In Firefox OS they just import web component as normal js library and not use HTML import.

ex: gaia-switch element https://github.com/gaia-components/gaia-switch