gistfile1.html

/*** Template-Bind Delegate Listener ***/

<script>
  document.addEventListener('bind', function(e){
    switch(e.target.template.id) {
      case 'foo-template-1':
        // Do some foo 1-ish stuff
        break;
      case 'foo-template-2': 
        // Do some foo 2-ish stuff
        break;
    }
  });
</script>

/*** Method 1 ***/

<element tagname="x-foo">
  <template id="foo-template-1">
    <shadowroot>
      <div>Baaar me matey!</div>
    </shadowroot>
  </template>
</element>


/*** Method 2 ***/

<template id="foo-template-2">
  <shadowroot>
    <div>Baaar me matey!</div>
  </shadowroot>
</template>

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