在调用“disconnectedCallback”之前，是否可以多次调用自定义元素的“connectedCallback”？

The spec https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance says:

但是，请注意，connectedCallback 可以被多次调用，因此任何真正一次性的初始化工作都需要一个防护来防止它运行两次。

这是什么意思？难道是这么说的connectedCallback之前可以被调用多次（由浏览器引擎）disconnectedCallback曾经被召唤过吗？

如果总有一个connectedCallback对于每一个disconnectedCallback，那么这个说法就毫无意义了。

我显然会清理我在其中创建的任何内容connectedCallback in disconnectedCallback，因此我不会让事情“运行两次”。

一切都取决于您在回调中执行的操作，以及您可能合理预期的附加/分离事件数量。如果它确实很复杂，并且您的节点可能在 DOM 中移动很多，那么绝对值得考虑事件与渲染。换句话说，事件循环的考虑。举个例子：

var square = document.createElement('custom-square');
var one = document.getElementById('one');
var two = document.getElementById('two');
one.appendChild(square);
two.appendChild(square);
one.appendChild(square);
two.appendChild(square);

在这个例子中你会得到几个connectedCallback和几个disconnectedCallbacks：每人一个appendChild。然而所有这些背靠背appendChild调用全部发生在事件循环的同一周期中。

所以当你得到四个独立的connectedCallback电话以及三个单独的电话disconnectedCallback调用时，该节点只是rendered一次，附加到#two.

这并不总是一个问题，但由于大多数现代浏览器尝试以 60 FPS 渲染，这意味着每个渲染周期的时间少于 17 毫秒来完成所有 JavaScript，and让浏览器对给定的帧进行所有解析/流动/渲染。

如果这成为一个问题，您可以通过将适当的工作推迟到某个人来防止此类事情的发生。requestAnimationFrame回调，然后取消该 rAF（如果您有未来）connectedCallback下一个渲染事件之前的事件，因为您可能只关心最后一个事件。