编写Web组件时如何处理“一旦不再连接元素就可以调用connectedCallback”

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

作为Webcomponent的无经验​​开发人员，我试图了解到目前为止推荐的所有经验法则和最佳实践。

继续阅读，上面写着“ ...使用Node.isConnected确保”。很明显，这意味着什么：检查它是否仍处于连接状态，但至少对于我来说不清楚，我应该怎么做才能解决该问题，或者在某些情况下应该期望什么。

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

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

此外，我没有阅读“最佳做法”中有关“元素不再连接”的任何建议。

我读了一些精彩的讨论：

可以将自定义元素连接的回叫比光盘多一次

从那里得知，我始终可以信任这个生命周期构造函数-> connectedCallback-> connectededCallback。

和

当所有子自定义元素都已连接时，如何具有“ connectedCallback”

基本上我了解到没有一种特定的方法“在所有孩子都升级后被称为”

这两个问题都接近我的问题，但是并不能回答我：应该知道哪个挑战或风险，或者如何解决“一旦元素不再连接，就可以调用connectedCallback”的可能性？在上述情况下，我缺少任何治疗方法吗？我是否应该创建一些观察者，当元素不再可用时触发该观察者以重新创建事件源对象，并再次向该事件源对象添加侦听器？

我粘贴代码为波纹管和ilustration完整WebComponent的例子可以从克隆https://github.com/jimisdrpc/simplest-webcomponet并从其后端https://github.com/jimisdrpc/simplest-kafkaconsumer。

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);