我的问题中粘贴的那句话是从https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks.
作为一名没有 WebComponent 经验的开发人员，我试图了解迄今为止推荐的所有经验法则和最佳实践。
继续阅读它说“...使用 Node.isConnected 来确保”。它的含义很明显：检查它是否仍然连接，但至少对我来说，尚不清楚我应该采取什么措施来解决它，或者在某些情况下我应该期待什么。
我的情况是我正在创建一个 Web 组件来侦听 SSE（服务器发送事件）。这对于 alife 仪表板和其他几个场景非常有用。 SSE事件在从Kafka Stream消费后基本上将由NodeJs或Spring Webflux响应。
到目前为止，我所做的所有简单示例都没有遇到任何元素在连接回调期间不再连接的问题。
另外，我没有读过任何推荐最佳实践 https://developers.google.com/web/fundamentals/web-components/best-practices视为“不再连接的元素”。
我读了一些精彩的讨论：
可以在光盘之前调用自定义元素连接回调多次吗 https://stackoverflow.com/questions/54874212/can-a-custom-elements-connectedcallback-be-called-more-than-once-before-disc
从那里我了解到我始终可以信任这个生命周期构造函数 -->connectedCallback -->disconnectedCallback。
And
当所有子自定义元素已连接时如何拥有“connectedCallback” https://stackoverflow.com/questions/48663678/how-to-have-a-connectedcallback-for-when-all-child-custom-elements-have-been-c
基本上我了解到没有一个特定的方法“在所有孩子都升级后调用”
这两个问题都接近我的问题，但它没有回答我：应该注意哪些挑战或风险，或者如何解决“一旦元素不再连接，可能会调用connectedCallback”的可能性？在我上述的情况下，我是否缺少任何治疗？我是否应该创建一些观察者，当元素不再可用时触发，以重新创建事件源对象并再次向此类事件源对象添加侦听器？
我粘贴了下面的代码进行说明，完整的 Web 组件示例可以从https://github.com/jimisdrpc/simplest-webcomponet https://github.com/jimisdrpc/simplest-webcomponet及其后端https://github.com/jimisdrpc/simplest-kafkaconsumer 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);
