title: How to catch custom events in Web Components?
body: <p>To let Web Components communicate with each other, I'm using custom events. Let's imagine the following:</p>
  <p>WebComponentA uses or contains WebComponentB which sends a CustomEvent (bubbles: true, composed: true) if a button is clicked. WebComponentA wants to do something if WebComponentB sends this event.</p>
  <p>How should I dispatch the event within WebComponentB?</p>
  <pre><code>window.dispatchEvent(customEvent);
  </code></pre>
  <p>or</p>
  <pre><code>this.shadowRoot.dispatchEvent(customEvent);
  </code></pre>
  <p>How should I catch the event within WebComponentA?</p>
  <pre><code>window.addEventListener(custom-event, () =&gt; {
  );
  </code></pre>
  <p>or</p>
  <pre><code>this.shadowRoot.addEventListener(custom-event, () =&gt; {
  );
  </code></pre>
  <p>Are there any negative effetcts I should consider using one or another?</p>
  <p>Thank you!</p>