title: How to listen for custom events defined web component
body: <p>I have a custom element <code>my-checkbox</code> that wraps a checkbox, label, styling, etc.  When that checkbox is toggled I am defining a <code>CustomEvent</code> named check within my constructor, like so:</p>
  
  <pre><code>constructor(){
     super();
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this.checkEvent = new CustomEvent("check", {
       bubbles: true,
       cancelable: false,
     });
   }
  </code></pre>
  
  <p>I dispatch that event when the checkbox is toggled:</p>
  
  <pre><code>toggleCheckbox(){
    this.dispatchEvent(this.checkEvent);
    console.log(this.checkEvent);
    ...
  }
  </code></pre>
  
  <p>I infer that this event is being dispatched because the contents of the console.log show the signature of a CustomEvent</p>
  
  <p>I have another custom element <code>my-checkreport</code> that contains my-checkbox and is supposed to react to the "check" event.  I have defined an event listener in the connected callback of <code>my-checkreport</code></p>
  
  <pre><code>connectedCallback(){
    ...
    this.addEventListener("check", function (e) {
          console.log('listend to check event');
          console.log(e);
      });
   }
  </code></pre>
  
  <p>However, this eventListener never fires, never seems to 'hear' the "check" event dispatched in the <code>my-checkbox</code> component.  I've tried adding this listener in the constructor with the same result.</p>
  
  <p>Any ideas what I'm doing wrong?</p>
  
  <p>Background: I'm doing it this way in the interest of making these elements composable.  I also have read that best practices for developing web components is to "Use custom events to pass information out of components..."</p>