gistfile1.js

/*** Method 1 ***/

<element tagname="x-foo">
  <template>
    <shadowroot>
      <div>Baaar me matey!</div>
    </shadowroot>
  </template>
  <script>
    this.addEventListener('bind', function(){
      // do stuff when bound
    });
  </script>
</element>


/*** Method 2 ***/

<template id="foo-template">
  <shadowroot>
    <div>Baaar me matey!</div>
  </shadowroot>
  <script>
    this.addEventListener('bind', function(){
      // do stuff when bound
    });
  </script>
</template>

<element tagname="x-foo" template="foo-template">
  <style scoped>
    /* Super slick styles for x-foo */
  </style>
</element>