Svelte自定义元素中window scroll事件监听器无法移除的原因排查

你的问题出在Svelte自定义元素（Web Component）的生命周期钩子和普通Svelte组件不一致：

• 普通Svelte组件的onDestroy会在组件实例销毁时触发，但自定义元素场景下，元素从DOM移除时，Svelte不会立刻销毁组件实例（因为元素可能被重新插入DOM），所以onDestroy不会执行，导致事件监听器无法被移除。

• 正确的做法是使用Web Component原生的disconnectedCallback钩子，它会在元素从DOM断开连接时立即触发，刚好匹配你需要移除事件的时机。

修改后的代码如下：

<svelte:options tag="custom-element" />

<script>
  import { onMount } from "svelte";

  onMount(() => {
    window.addEventListener("scroll", funcRef);
  });

  // 用Web Component原生的断开钩子替代onDestroy
  function disconnectedCallback() {
    window.removeEventListener("scroll", funcRef);
  }

  const funcRef = (event) => {
    doWhatever();
  }
</script>

额外提示：如果你的自定义元素需要被多次插入/移除DOM，这种connectedCallback（对应Svelte的onMount）和disconnectedCallback配对的方式，能保证每次元素插入时添加监听，移除时清理监听，完全符合Web Component的生命周期行为。

内容的提问来源于stack exchange，提问作者Annika