Is it possible to bind an event listener to an element within a shadow dom from external script?

Try querying against the element's shadowRoot. In other words, lets say you have an element <super-ultra-element>, and inside that element's shadow dom is a div with class 'potato' that you wish to attach a click handler to.

You should be able to do this by first obtaining the element's shadowRoot: var superUltraRoot = document.querySelector('super-ultra-element').shadowRoot;.

Once you have the shadowRoot, you can query the element's shadow dom for the item you care about: var potatoDiv = superUltraRoot.querySelector('.potato');.

You now have a reference to the element you're trying to add a click handler to, so doing so should be fairly easy: potatoDiv.addEventListener('click', someClickCallback);

I have tried using the .bind('click', function(){}) on both the elements in the template element

1. Adding event listener to template won't work. The element you are binding to should be part of DOM.

and the actual shadow dom element but I can't seem to access them

2. I don't think jquery understands shadow-root yet. If you are using jquery to query for elements in shadow-dom I don't think it will return a node(Should it?)

So, you have 2 options:

1. As suggested in other answer, you can bind eventlistener to actual element by querying for it inside shadow-root, which can by accessed by shadowRoot property on element.
2. Or, you can use jquery event-delegation to bind event listener on parent(in this case host of shadow-dom) with appropriate selector. When event will be propagated to parent, listener will be fired.

Ex:

$( "#list" ).on( "click", "a", function( event ) {    event.preventDefault();    console.log( $( this ).text() );});