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>
<body>
  
  <template id="template">
    <x-bar id="xbar"></x-bar>
    <script>
      console.log('[script *inside* appending fragment] xbar.customized: ' + xbar.customized);
    </script>
  </template>
​
  <script>
    // 1. create fragment containing custom element candidate: xbar
    var frag = document.importNode(template.content, true);
    
    // 2. define x-bar
    customElements.define('x-bar', class extends HTMLElement {
      constructor() {
        super();
        this.customized = true;
        console.log('constructed: ' + this.localName);
      }
    });
    console.log('x-bar defined');
    
    // 3. append fragment containing xbar, causing it to upgrade
    // (also run a script in that fragment that checks if xbar is upgraded)
    document.head.appendChild(frag);
    // 4. after appending, check if xbar is upgraded.
    console.log('[script *after* appending fragment] xbar.customized: ' + xbar.customized);
​
  </script>  
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
sorvellpro
0viewers