Search code examples
javascriptpolymerjsfiddlepolymer-1.0jsbin

Can I use Polymer on JSFiddle?


I want to create quick prototypes of Polymer elements in a sandbox like JSFiddle or JavaScript Bin, but I can't get it working!


Solution

  • Yes, you can, thanks to polygit.

    Here's a boilerplate example you can fork: https://jsfiddle.net/kaycebasques/2q3fqehz/

    HTML:

    <base href="https://polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="polymer/polymer.html" rel="import">
    
    <dom-module id="x-example">
      <template>
        <style>
          :host {
            display: block;
          }
        </style>
        <h1>polyfiddle</h1>
      </template>
    </dom-module>
    
    <x-example></x-example>
    

    JS:

    // only need this when in the main document and on non-Chrome
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'x-example'
      });
    });