title: HTML-based event listener for webcomponents/custom events (JS)
body: <p>TL;DR; <strong>Is it possible to define an event listener in HTML (not JS) for a custom events?</strong></p>
  
  <p>Basing on this <a href="https://codepen.io/tony19/pen/EWerge?editors=1011" rel="nofollow noreferrer">codepen</a>, I'm trying to do the following:</p>
  
  <pre><code>&lt;my-checkreport
    onclick="myFunction()"
    oncheck="myFunction1)"
    check="myFunction()"
  &gt;&lt;/my-checkreport&gt;
  </code></pre>
  
  <p>where <code>myFunction</code> does some <code>console.log</code> stuff that I can see in the browser console. Native <code>onlick</code> works, of course, but neither <code>oncheck</code> nor <code>check</code> work, for the custom event defined below (source taken from above linked <a href="https://codepen.io/tony19/pen/EWerge?editors=1011" rel="nofollow noreferrer">codepen</a>):</p>
  
  <pre><code>customElements.define('my-checkbox', class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'});
      this.checkEvent = new CustomEvent("check", {
        bubbles: true,
        cancelable: false,
      });
      shadowRoot.innerHTML = `
        &lt;label&gt;
          &lt;input type="checkbox" id="my-checkbox"&gt;&lt;/input&gt;
          Dummy Enabled
        &lt;/label&gt;`;
      shadowRoot.querySelector('#my-checkbox').addEventListener('click', (e) =&gt; {
        console.log('checked', e.target.checked);
        this.dispatchEvent(this.checkEvent);
      });
    }
  });
  </code></pre>
  
  <p>Is it possible to attach event listeners for custom events in HTML?</p>