在构造函数内部定义自定义元素的生命周期回调

Question

以下定义，创建并最终将我的“自治自定义元素”的实例插入容器：

class MyCustomElement extends HTMLElement {
  static get elementName() {
    return 'my-custom-element';
  }

  constructor() {
    const self = super();
    let _myPrivateData = 'privateValue';

    // the following does not cause the callback to be invoked at all!
    MyCustomElement.prototype.connectedCallback = function() {
      console.log('connected!');
    };

    return self;
  }

  //// this would've got invoked anyways, but there's no access to the `_myPrivateData`
  // connectedCallback() {
  //     console.log('connected!');
  // }
}

let myCustomElementName = MyCustomElement.elementName;
customElements.define(myCustomElementName, MyCustomElement);

let myCustomElement = document.createElement(myCustomElementName);
let container = document.getElementById('container');
container.appendChild(myCustomElement);

<div id="container"></div>

我已经在“构造函数”内部定义了connectedCallback以便可以访问connectedCallback，但随后根本不会调用该回调！在“类主体”之后立即具有相同的代码摘录确实会导致调用回调，但代价是无法访问_myPrivateData。

为什么？我应如何处理此问题以访问_myPrivateData（保留其“ private”性质）并使回调调用正常工作？

Answer 1

由于自定义元素的实现，必须在使用_myPrivateData定义元素之前定义所有回调。这些回调是只读的。

要处理私有值，您可以定义自己的自定义回调，该回调将由标准customElements.define()方法调用。

请参见下面的示例：

connectedCallback()

class MyCustomElement extends HTMLElement {
  constructor() {
    super()
    let _myPrivateData = 'privateValue'

    // the following does not cause the callback to be invoked at all!
    this.connectedCallback = function() {
      console.log('connected! : ' + _myPrivateData )
    }
  }

  connectedCallback() {
      this.connectedCallback()
  }
}

customElements.define('my-custom-element', MyCustomElement)

更新

有效的生命周期回调实际上是只读/冻结。定义自定义元素后，您将无法修改它们。

考虑一下，当您调用<my-custom-element></my-custom-element>时，会将生命周期回调从具有相同名称的customElements.define()回调条目复制到“定制元素注册表”，如果不存在回调名称，则将其设置为class。

创建自定义元素的实例时，这些是被调用的回调副本，而不是回调类void()方法。您无法访问并因此修改这些副本。

您仍然可以修改类回调（prototype条目），但不会影响自定义元素的生命周期。

这将对所有相同的自定义元素实例强制执行生命周期的一致性。