Javascript “如何交易”；一旦您的元素不再连接，就可以调用connectedCallback；对网络组件进行编码

贴在我问题上的那句话是抄袭自

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

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

我的情况是，我正在创建一个网络组件来侦听SSE（服务器发送的事件）。这将适用于alife仪表板和其他几个场景。从卡夫卡流中消费后，SSE事件基本上由NodeJs或Spring Webflux响应

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

此外，我没有阅读任何关于“元素不再连接”的建议

我读了一些精彩的讨论：

从中我了解到，我可以始终信任此生命周期构造函数-->connectedCallback-->disconnectedCallback

及

基本上，我学到了没有一个特定的方法“在所有孩子升级后调用”

这两个问题都与我的问题很接近，但都没有回答我：应该注意哪些挑战或风险，或者如何解决“一旦元素不再连接，就可以调用connectedCallback”的可能性？在我上面描述的情景中，我是否缺少任何治疗？我是否应该创建一些观察者，当元素不再可用于重新创建eventsource对象并再次向此类eventsource对象添加侦听器时触发这些观察者

我粘贴了下面的代码进行说明，完整的Webcomponent示例可以从中克隆，其后端也可以从中克隆

const template=document.createElement（'template'）；
template.innerHTML=`；
类InputKafka扩展了HtmleElement{
构造函数（）{
超级（）；
}
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'，函数（e）{
console.log（'fromKafka'）；
inputKafka.value=e.data；
}，假）；
}
attributeChangedCallback（名称、旧值、新值）{
log（'attributeChangedCallback'）；
}
disconnectedCallback（）{
log（'disconnectedCallback'）；
}
adoptedCallback（）{
log（'adoptedCallback'）；
}
}
定义（“输入卡夫卡”，输入卡夫卡）；

在自定义元素断开连接后调用

connectedCallback（）

的唯一情况是在您使用它时：在创建它后快速移动或删除它有时可能会导致这种情况

---

在您描述的用例中，如果您使用一个持久的单页应用程序来承载Web组件，那么这种情况永远不会发生。实际上，在页面关闭之前，您的自定义元素永远不会断开连接。

除了@supersharp所说的之外，我还将添加一件事：

不要在

connectedCallback

中调用

attachShadow

：

您的代码：

类InputKafka扩展了HtmleElement{ 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'，函数（e）{ console.log（'fromKafka'）； inputKafka.value=e.data； }，假）； }

---

}你回答了我的问题。只是一个额外的评论：在您看来，是否建议connectedCallback阶段连接到SSE服务？@JimC是的，它可以。连接并不耗时，所以没有副作用。“你的代码应该在构造函数中调用attachShadow”对我来说很清楚。但我想知道是否应该使用构造函数中的后端并将响应分配给html对象。“this.shadowRoot.getElementById（'inputKafka'）”真的在构造函数期间总是返回true吗？在构造过程中，我读到了not“getElement”。另外，我正在努力弄清楚如何正确地对网络组件进行单元测试。如果您想使用wct for vanilla Webcomponent，我非常感谢您提供的任何线索和主要评论。您可以将

source.addEventListener

移动到

connectedCallback

中，但是，如果您这样做，您应该删除

disconnectedCallback

中的事件侦听器。如果不这样做，那么每次移动组件时（假设曾经移动过），都会添加更多事件侦听器并导致问题。构造函数可以对shadowRoot中的元素执行任何操作，但不允许对不在其shadowRoot中的子元素执行任何操作。

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