Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html> 
<head>
 
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  
  <link href="https://unpkg.com/@polymer/polymer@2.0.0/polymer.html" rel="import" >
  <link href="https://unpkg.com/@polymer/polymer@2.0.0/polymer-element.html" rel="import" >
  
  <style>
  </style>
</head>
  
<body>
​
  <dom-module id='x-test'>
    <template>
      <template id="template">
        <h1>Title</h1>
        <h1>[[greeting]]</h1>
      </template>
    </template>
    
    <script>
      /**
       * @polymer
       * @customElement
       * @appliesMixin News.OutletMixin
       */
      class XTest extends Polymer.Element {
        static get is () { return 'x-test'; }
        
        ready () {
          super.ready();
          
          // Get a template from somewhere, e.g. light DOM
          let template = this.shadowRoot.querySelector('#template');
          // Prepare the template
          let TemplateClass = Polymer.Templatize.templatize(template, this, {});
          // Instance the template with an initial data model
          let instance = new TemplateClass({greeting: 'Hi'});
          // Insert the instance's DOM somewhere, e.g. element's shadow DOM
          this.shadowRoot.appendChild(instance.root);
        }
      }
​
      window.customElements.define(XTest.is, XTest);
    </script>
  </dom-module>
  
  <x-test></x-test>
</body>
  
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
vpalmisanopro
0viewers