为什么 connectCallback() 没有绑定到与具有自定义元素 v1 的构造函数相同的 this？

Question

对自定义元素有更好了解的人能否解释为什么 connectedCallback 在 Chrome 中绑定到此，但在 Safari、IE 和 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);

并且在 webpack 入口文件中：

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

Answer 1

您需要一个 polyfill 才能在 Safari、IE 或 FF 中使用自定义元素 v1。

您可以使用 document-register-element v1.4:

bower install document-register-element

或者您可以使用 webcomponentsjs v1（候选发布）：

bower install webcomponentsjs#v1

有了它，您将在 Chrome 和 polyfilled 之间获得一致的结果（undefined 代表 constructor()，null 代表 connectedCallback()）

Answer 2

答案是：阅读文档，并使用警告。构造函数应如下所示：

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

为什么 connectCallback() 没有绑定到与具有自定义元素 v1 的构造函数相同的 this？

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

html

javascript

custom-component

custom-element