Search code examples
javascripthtmlcustom-componentcustom-element

Why is connectCallback() not bound to the same this as the constructor with custom elements v1?

Could somebody with a better knowledge of custom elements explain why the connectedCallback is bound to this in Chrome, but not in Safari, IE and FF?

"use strict";


class XChat extends HTMLElement {

  constructor() {
    super();
    this._chats = null;
    console.log(this._chats); // null
  }

  connectedCallback() {

    console.log(this._chats); // undefined in safari, IE, FF, null in chrome
  }

}
customElements.define('x-chat', XChat);

and in webpack entry file:

import 'document-register-element';
import './components/x-chat/index.html';
Solution

  • The answer is: read the docs, and use the ceveat. The constructor should look like this: 

    constructor(self) {
    self = super(self);
    return self;
}