gistfile1.js

window.addEventListner('HTMLImportsLoaded', function(){

  // raw
  // - requires the creation of an entire emitter system
  // - provides 0 benefit a developer cannot derive by simply adding an event to the specific template
  if (fooTemplate && !fooTemplate.propertChangeAdded) {
  	fooTemplate.propertChangeAdded = true;
        fooTemplate.on('propertychange', function(element,name,value,old){
          
        });
  }

  // Static helper
  // - requires recreating an entire events management system *per component*
  // - suggests to devs creation of their own unique, event systems *per component*
  // - actually prevents various common use-cases, in a more verbose, less performant way
  if (XTemplate && !XTemplate.fooListenersAdded) {
    XTemplate.fooListenersAdded = true;
    XTemplate.addPropertyChangeListeners('foo-template',{
        'gee': function(element,value,old){
        
        },
        'zoo': function(element,value,old){
        
        }
    });
  }
  
  if (XTemplate && !XTemplate.barListenersAdded) {
    XTemplate.barListenersAdded = true;
    XTemplate.addPropertyChangeListeners('bar-template',{
        'bee': function(element,value,old){
        
	    },
        'moo': function(element,value,old){
     
        }
    });
  }

});

VS

window.addEventListener('templatepropertychange', function(e){      
	if (e.target.name == 'foo-template'){
    
	}
});

or

window.addEventListener('templatepropertychange', function(e){
	
	if (e.target.name == 'foo-template'){
		switch(e.property){
			case 'gee': console.log('property bar is now: ' + e.value);
			case 'zoo': console.log('property zoo is now: ' + e.value);
		}
	}
	
       	if (e.target.name == 'bar-template'){
		switch(e.property){
			case 'bee': console.log('property bee is now: ' + e.value);
 			case 'moo': console.log('property moo is now: ' + e.value);
		}
	}

});

or

window.addEventListner('HTMLImportsLoaded', function(){
    if (XTemplate){
        XTemplate.getTemplate('foo-template').addEventListener('templatepropertychange', function(){
            
        });   
    }
});