web component - Is there CDN for polymer elements?

Question

I would like to know if there are any CDNs for polymer elements, since you have to always download the elements and It would be more convinient to import it via cdn. Can't find any on google? Also are there any reasons that it does not exists or just because it is so new?

Answer 1

There is now!

I created this GitHub repository specifically for this purpose:

download/polymer-cdn

All GitHub repositories are automatically in CDN through RawGit. So, using that, we can now import Polymer elements using markup like this (for iron-icons in this case):

<link rel="import" 
      href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-icons/iron-icons.html">

The project structure was set up in such a way that imports from elements that you import (transitive dependencies) resolve correctly.

The readme for the repository has a list of all elements it contains.

Missing something? Let me know and I'll be happy to include it.

Try it

You can try it out right now by hacking on this Codepen:

Polymer-CDN Example.

Or you can run this code snippet:

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<style is="custom-style">
  :root {
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900);
    --paper-tab-ink: var(--paper-light-blue-100);
    --paper-tabs: {
      color: white;
      background-color: var(--paper-light-blue-500);
    };
  }
</style>

<div>
  <paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
  <paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>

<p><paper-checkbox>Checkbox</paper-checkbox></p>

<p><paper-toggle-button></paper-toggle-button></p>

<paper-tabs selected="0">
  <paper-tab>TAB 1</paper-tab>
  <paper-tab>TAB 2</paper-tab>
  <paper-tab>TAB 3</paper-tab>
</paper-tabs>