MutationObservers如何用于查找元素的父级从DOM中删除？

Question

我的应用程序有一些附加到DOM树中底部的元素上的MutationObservers。它们需要检测任何一个祖先从DOM中移除的情况。

使用MutationObservers检测特定元素或其任何子元素是否被删除非常简单。但是，如何确定任何一个元素的父元素是否被删除呢？

这里有一个plunker演示了这个问题。在plunker中，注意当您点击“删除父元素”时，将调用父元素的变异观察器。然而，子元素的观察器却没有被调用。

我该如何高效地使用MutationObservers来检查节点何时从文档中删除？

---

编辑

我的使用情况是，我实现了一些Web组件，需要在它们（或它们的某个父级）从DOM中删除时调用清理代码。我希望每个Web组件都是封装的，以便处理自己的清理，并且没有全局注册表（除了本机window.customElements）。

- Andrew Eisenberg

---

你的标题与你的问题相反。 - Barmar

我认为你不能在子观察器中完成它。你需要在父级中检测，然后可以使用 elementBeingRemoved.contains(child) 来测试子元素是否受到影响。 - Barmar

据我所知，MutationObserver只能监视子元素。为什么不能从DOM根节点附近进行观察？另外，你的使用场景是什么？看起来你知道节点将被移除...通过移除机制控制这一点几乎肯定比使用MutationObserver更好。 - McHat

@McHat，我确实意识到MutationObservers并不直接用于此，但我正在尝试找出最佳方法。我将在问题中更新一个使用案例。 - Andrew Eisenberg

@Barmar，你说得对，我的问题很令人困惑。我也会更新它。 - Andrew Eisenberg

Answer 1

如果你从头开始实现Web组件，应该使用本地的生命周期回调函数。在你的情况下，disconnectedCallback将触发组件内部的清除代码。

- cyr_x

---

这看起来正是我所需要的。让我试一试。 - Andrew Eisenberg