How to import core elements and paper elements in JSFiddle

Question

How can I import core elements and paper elements in JSFiddle.

I'm importing polymer through those statements:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/polymer.js"></script>

How can import for example core-input or paper-input?

Allahabad

Answer 1

Yes from the polymer project site or I guess your cloudflare cdn if you know the location

<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">

This is just for dev and not production.

If you goto polymer elements then choose your element and click on the button that says Get Element it will give you a popup with an import link.

Also you can get a link for all core or paper elements from here

Gayden

It seems these no longer work since 1.0. They give 404. But you can grab them from polymer-cdn. – Demonstrative

Ah I figured it out. For the old version these can still be used, but you have to add 0.5 to the url: polymer-project.org/0.5/components/polymer/polymer.html – Demonstrative

I think it is very scary though that (apart from the 0.5) there is no version in the URL. I personally think you should always use URLs to a specific version, not to some 'master' that can change at any moment... – Demonstrative

Answer 2

A good alternative - still a work in progress - is https://ele.io/

Ele (call it “Ellie”) is a streamlined environment for exploring, experimenting with, and sharing reusable custom HTML elements made with Web Components.

Radiobiology

That looks really outdated. GitHub repo last updated December 2014, and there seems to be no support for Polymer 1.0. github.com/divshot/ele-web – Rechaba

One of the creators of Ele here -- would love to update it for Polymer 1.0, just haven't had the time. – Lynettalynette

Answer 3

To test a simple component written in Polymer 1.0 I use this snippet:

<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">

<dom-module id="proto-element">
    <template>
        <span>I'm <b>proto-element</b>. Check out my prototype.</span>
    </template>
</dom-module>

<script>
    Polymer({
        is: "proto-element",
        ready: function() {
            //...
        }
    });
</script>

<proto-element></proto-element>

http://jsfiddle.net/MartyIX/84b5sabw/

Comines