gistfile1.html

/*** Method 1 ***/

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


/*** Method 2 ***/

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

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