html import polymer compatibility

Question

I understand that Polymer uses html imports all over the place. eg.

<link rel="import" href="bower_components/polymer/polymer.html">

I looked on can I use for html imports and it states that its only availabe for chrome. http://caniuse.com/#search=html%20imports

Does this mean that anything built in polymer that uses html imports (the code above) won't work on the other browsers - firefox , safari etc. or am I getting confused with the html imports?

Answer 1

To add to a1626 reply, it is true that not all browsers support HTML imports. This feature is going to be a standard for web browsers, but it is still a work in progress.

However, you can use the polyfill that a1626 mentioned. This will allow you to use polymer components in "all" (modern) browsers. In order to do so, you just need to import, in your index.html page (and whatever html page you import and use polymer components, except for the polymer components themselves) the webcomponents.js script.

Like it says in the Polymer project website, you just need to do this:

<!-- Polyfill Web Components support for older browsers -->
<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>

Since you probably will get this webcomponentsjs from bower, then it is actually this:

<!-- Polyfill Web Components support for older browsers -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

And thats it, you can now use polymer in all modern browsers :)

This library will allow you to use html imports, thus allowing you to use polymer components in all modern browsers. It's not going to be as fast as in Chrome that already has native support for this, but it's still going to be completely usable.

Answer 2

As all the browser's have not yet implemented this feature the workaround is to use polyfill