Dynamic event delegation

content.js

Component.extend({
  tag: 'panel-component',
  ViewModel: {
    collapsed: 'boolean',
    contentRenderer: {
      default(){
        return stache(`<p>Hello world</p>`);
      }
    }
  },
  view: `
    <div class="wrapper">
      <button on:click="collapsed = not(collapsed)">Close</button> 
      {{#not(collapsed)}}{{contentRenderer(this)}}{{/not}}
    </div>
  `
});


// USAGE:
const template = stache(`<button class="custom">Do stuff!</button>`);
stache(`<panel-component contentRenderer:from="template" />`)({
  template,
  // pass connected callback
  connectedCallback(el){
    this.listenTo('button.custom click', () => {
      this.collapsed = !this.collapsed;
    });
  },
  
  // OR pass events??
  events: {
    'button.custom click': function(){
      this.viewModel.collapsed  = false;
    }
  }
});