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>
<head>
  <meta charset="utf-8">
</head>
<body>
​
  <x-foo>Hello World</x-foo>
  
  <button onclick="addScript();">Upgrade</button>
  
  <script>
    // Set a property on the unupgraded x-foo.
    document.querySelector('x-foo').zerp = {msg: 'The beagle has landed'};
    
    // Add x-foo's definition to the page, causing it to upgrade.
    function addScript() {
      document.body.appendChild(
        document.querySelector('template').content.cloneNode(true)
      );
    }
  </script>
  
  <template>
    <script>
      class XFoo extends HTMLElement {
        constructor() {
          super();
          this.upgradeProperty('zerp');
        }
        upgradeProperty(prop) {
          if (this.hasOwnProperty(prop)) {
            let value = this[prop];
            delete this[prop];
            this[prop] = value;
          }
        }
        set zerp(value) {
          this.textContent = value.msg;
        }
        get zerp() {
          return this.textContent;
        }
      }
      customElements.define('x-foo', XFoo);
    </script>
  </template>
​
</body>
 
​
Output

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

Dismiss x
public
Bin info
robdodsonpro
0viewers