一旦元素不再连接，如何调用"connectedCallback".编码Web组件

问题描述

粘贴在我的问题中的那句话是从 https:复制而来的://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks .

That statement pasted in my question was copied from https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks.

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

As a no-experience developer with Webcomponent, I am trying to understand all rule-of-thumbs and best practices recommended so far.

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

Continuing reading it says "... use Node.isConnected to make sure". It is quite obvious what it means: check if it is still connected but it is not clear, at least for me, what I should do to workaround it or what I should expect in some circustances.

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

My case is I am creating a Webcomponent to listen SSE (Server Sent Events). This will be usefull for a alife dashboard and several other scenarios. The SSE event will be basically responded either by NodeJs or Spring Webflux after consumed from Kafka Stream.

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

All simple examples I did so far I didn't face any issue with element not longer connected during connectedcallback.

此外，我没有在最佳做法考虑元素不再连接".

Additionally, I didn't read any recommendation in Best Practices regard "element no longer connected".

我读了一些精彩的讨论:

I read few excellent discussions:

can-a-custom元素连接回调比光盘调用一次要多

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

from where I learned that I can always trust in this lifecycle constructor --> connectedCallback --> disconnectedCallback.

还有

如何当所有子自定义元素均已连接时，具有一个"connectedCallback"

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

where basically I learned there is not a specific method "called after all children were upgraded"

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

Both questions pass close to my question but it doesn't answer me: which challenge or risk should be aware of or how to workaround the possibility to "connectedCallback may be called once your element is no longer connected"? In my scenario described above is there any treatment I am missing? Should I created some observer that triggers when the element is not longer available to recreate an eventsource object and add again a Listener to such eventsource object?

我粘贴了下面的代码以进行说明，并且可以从 https://github克隆完整的Webcomponent示例.com/jimisdrpc/simplest-webcomponet 及其来自 https://github.com/的后端jimisdrpc/simplest-kafkaconsumer .

I pasted the code bellow for ilustration and the complete Webcomponent example can be cloned from https://github.com/jimisdrpc/simplest-webcomponet and its backend from 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);

推荐答案

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

The only case when connectedCallback() is called after the Custom Element is disconnected is when you play with it: moving it or removing it very quickly after it is created could sometimes lead to this situation.

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

In your described use case, if you're using a persistent, single page application to host your Web Component, this will never happen. Actually your Custom Element will never be disconnected, until the page is closed.

这篇关于一旦元素不再连接，如何调用"connectedCallback".编码Web组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！