title: Webcomponents communicating by custom events cannot send data
body: <p>I'm intrigued by webcomponents (and pretty new to javascript) and I am trying to set up a dummy microfrontend app. Ok, components are served by different web server (webpack devserver to be honest) and correctly displayed in the 'aggregator' page. I also add a customevent to send some text from a webcomponent to another and this is not working. Here is the sender webcomponent:</p>
  <pre><code>const tmplt = document.createElement('template');
  tmplt.innerHTML = `
  &lt;div&gt;
    &lt;label for=&quot;sendnpt&quot;&gt;message:&lt;/label&gt;
    &lt;input id=&quot;sendnpt&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
    &lt;button id=&quot;sendbtn&quot;&gt;Send the message&lt;/button&gt;
    &lt;div id=&quot;msglog&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  `;
  
  var input = {};
  
  window.customElements.define('team-zero', class TeamZero extends HTMLElement {
    constructor() {
      super();
      this._shadowRoot = this.attachShadow({ 'mode': 'open' });
      this._shadowRoot.appendChild(tmplt.content.cloneNode(true));
      this.button = this._shadowRoot.getElementById('sendbtn');
      input = this._shadowRoot.getElementById('sendnpt');
      this.button.addEventListener('click', function(evt) {
        var msg = {
          bubbles: true,
          detail: {}
        };
        msg.detail.name = input.value;
        console.log('sending msg: ' + JSON.stringify(msg))
        window.dispatchEvent(new CustomEvent('greet', msg));
      });
    }
    connectedCallback() {
      console.log('connected and ready!');
    }
  });
  </code></pre>
  <p>And this is the receiver:</p>
  <pre><code>const m = require('mithril');
  window.customElements.define('team-one', class TeamOne extends HTMLElement {
    constructor() {
      super();
      this._shadowRoot = this.attachShadow({ 'mode': 'open' });
      window.addEventListener('greet', (msg) =&gt; {
        console.log(&quot;a message arrives: &quot; + JSON.stringify(msg));
      });
    }
    connectedCallback() {
      console.log('connected!');
      m.mount(this._shadowRoot, {
        view: function(vnode) {
          return m(&quot;div&quot;, &quot;team-0ne runs mithril!&quot;);
        }
      });
    }
  });
  </code></pre>
  <p>Problem is that event is emitted and received, but there is no <code>detail</code> in it. Why receiver component cannot log the text the other one is sending, what am I missing?</p>
  <p>You can see the whole dummy project <a href="https://github.com/fpezzati/microfrontend" rel="nofollow noreferrer">here</a>.</p>