如何处理 "connectedCallback may be called once your element is no longer connected" 编码 Web 组件

Question

粘贴在我的问题中的语句是从 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks 复制的。

作为一个没有 Webcomponent 开发经验的开发者，我试图理解迄今为止推荐的所有经验法则和最佳实践。

继续阅读它说“...使用 Node.isConnected 来确定”。这意味着什么很明显：检查它是否仍然连接但不清楚，至少对我来说，我应该做什么来解决它或者在某些情况下我应该期待什么。

我的情况是我正在创建一个 Web 组件来侦听 SSE（服务器发送的事件）。这对于生活仪表板和其他几个场景很有用。从 Kafka Stream 消费后，SSE 事件基本上会由 NodeJs 或 Spring Webflux 响应。

到目前为止，我所做的所有简单示例都没有遇到任何关于在 connectedcallback 期间不再连接的元素的问题。

此外，我没有阅读 Best Practices 关于 "element no longer connected" 的任何建议。

我读了一些优秀的讨论：

can-a-custom-elements-connectedcallback-be-called-more-than-once-before-disc

从那里我了解到我始终可以信任这个生命周期构造函数 --> connectedCallback --> disconnectedCallback。

和

How to have a 'connectedCallback' for when all child custom elements have been connected

基本上我了解到没有特定方法"called after all children were upgraded"

这两个问题都接近我的问题，但它没有回答我：应该注意哪些挑战或风险或如何解决 "connectedCallback may be called once your element is no longer connected" 的可能性？在我上面描述的场景中，我缺少任何治疗方法吗？我是否应该创建一些当元素不再可用时触发的观察器以重新创建事件源对象并再次向此类事件源对象添加监听器？

我粘贴了下面的代码作为示例，可以从 https://github.com/jimisdrpc/simplest-webcomponet and its backend from https://github.com/jimisdrpc/simplest-kafkaconsumer.

克隆完整的 Webcomponent 示例

const template = document.createElement('template');
template.innerHTML = `<input id="inputKafka"/> `;

class InputKafka extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {

    this.attachShadow({mode: 'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    const inputKafka = this.shadowRoot.getElementById('inputKafka');

    var source = new EventSource('http://localhost:5000/kafka_sse');

    source.addEventListener('sendMsgFromKafka', function(e) {
      console.log('fromKafka');
      inputKafka.value = e.data;
    }, false);

  }
  attributeChangedCallback(name, oldVal, newVal) {
    console.log('attributeChangedCallback');
  }

  disconnectedCallback() {
    console.log('disconnectedCallback');
  }

  adoptedCallback() {
    console.log('adoptedCallback');
  }
}

window.customElements.define("input-kafka", InputKafka);

Answer 1

在自定义元素断开连接后调用 connectedCallback() 的唯一情况是在您使用它时：创建后快速移动或删除它有时会导致这种情况。

在您描述的用例中，如果您使用持久的单页应用程序来托管您的 Web 组件，则永远不会发生这种情况。实际上您的自定义元素永远不会断开连接，直到页面关闭。

Answer 2

除了@supersharp 所说的，我还要补充一点：

不要在connectedCallback中调用attachShadow:

您的代码：

class InputKafka extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    const inputKafka = this.shadowRoot.getElementById('inputKafka');

    const source = new EventSource('http://localhost:5000/kafka_sse');
    source.addEventListener('sendMsgFromKafka', function(e) {
      console.log('fromKafka');
      inputKafka.value = e.data;
    }, false);
  }
}

您的代码应该在构造函数中调用 attachShadow

class InputKafka extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    const inputKafka = this.shadowRoot.getElementById('inputKafka');

    const source = new EventSource('http://localhost:5000/kafka_sse');
    source.addEventListener('sendMsgFromKafka', function(e) {
      console.log('fromKafka');
      inputKafka.value = e.data;
    }, false);
  }
}

否则，每次将组件附加到主体时，您都将尝试创建一个新的 shadowRoot。 是的，您的代码可能不会那样做，但在编写代码时始终假设有人会附加、删除和 re-attach。

如果您不使用 shadowDOM，那么您需要等到调用 connectedCallback 以添加您在 Requirements for Custom Element Constructors.

中指定的子元素

我要么创建我的子元素一次，如果它们很复杂，要么每次连接组件时，当属性更改或属性更改时。

如何处理 "connectedCallback may be called once your element is no longer connected" 编码 Web 组件

How deal "connectedCallback may be called once your element is no longer connected" coding a Webcomponent

javascript

html

web-component

custom-element

native-web-component