LWC and addEventListener

Question

I am building a LWC with the intent to listen to an event from window.postMessage via window.addEventListner. However, after deploying the below code, I am not seeing any console logs from my LWC when I use chrome console to post the message to the window. I have tried using both this.addEventListener and window.addEventListener.

This is my first time building a LWC so I presume I am doing something wrong.

import { LightningElement } from 'lwc';

export default class MyEventHandler extends LightningElement {
    constructor() {
        super();
        this.addEventListener('message', this.handleMessage);
      }
      handleMessage = (event) => {
          console.log('event received')
          console.log(event);
      };
}

Answer 1

You definitely need to use window.addEventListener and window.removeEventListener. I also recommend using connectedCallback instead of constructor (though it should work either way).

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  message = 'none received (yet)'
  connectedCallback() {
    window.addEventListener('message', this.receiveMessage);
  }
  disconnectedCallback() {
    window.removeEventListener('message', this.receiveMessage);
  }
  receiveMessage = (event) => {
    this.message = event.data
  }
}

---

import { LightningElement, api } from "lwc";

export default class Child extends LightningElement {
  sendMessage() {
    window.postMessage('hello world', '*');
  }
}

Note that arrow functions keep their this reference to the class. If you use a normal function, you instead must use bind.

  #receiveMessageCallback;
  connectedCallback() {
    this.#receiveMessageCallback = this.receiveMessage.bind(this);
    window.addEventListener('message', this.#receiveMessageCallback);
  }
  disconnectedCallback() {
    window.removeEventListener('message', this.#receiveMessageCallback);
  }

We need to store the original event handler (#receiveMessageCallback), otherwise we will leak memory when the component unloads.

Demo.