自定义元素规范列出了"Requirements for custom element constructors"。
在这里，最后的咨询声明是
通常，应使用构造函数来设置初始状态和默认值，并设置事件侦听器，并可能设置影子根。
现在，关于Web组件的生命周期，从DOM中删除自定义元素会调用disconnectedCallback生命周期挂钩。据我了解，这将是我删除自定义元素添加的任何事件侦听器的时间点。
现在，如果我仍然拥有对该元素的引用，并且稍后再将其放回DOM中，则会触发connectedCallback生命周期挂钩。
这是我的问题：如果建议在constructor中设置事件监听器，而不是在connectedCallback中设置事件监听器，则重新引入的自定义元素将不会接收其监听器，之前由disconnectedCallback清理过的。
我觉得在构造函数中的 add事件侦听器建议（我从规范中引用）与设计的生命周期不能很好地配合。
自定义元素是否完全不是要从删除，然后又将重新引入 DOM？
有人解决此问题的方法吗？关于附加和删除侦听器是否有某种最佳实践？
答案 0 :(得分：2)
我倾向于将addEventListener的呼叫放在connectedCallback中。为什么以前呢？该控件不在DOM中，因此您无法与其进行交互。
我也将removeEventListeners放在了disconnectedCallback中。有时甚至在内部DOM复杂时，也可以清除内部DOM。
有一些组件将addEventListener添加到构造函数中，但是：
1）仅用于shadowDOM 2）仅在我自己不希望删除它们的情况下，因为当内部DOM被垃圾回收破坏时，它们会自动清除。 3）当我只是编写一个简单的测试组件时
但这不是我经常做的事情。如果有任何可能将我的组件添加到DOM中或从DOM中删除，那么我认为它必须在connectedCallback和断开连接的回调中发生