Svelte中如何在组件销毁前获取HTMLElement属性？

核心原因 #

组件销毁（destroy）阶段触发时，DOM元素已处于被移除状态或样式被重置，导致getBoundingClientRect()返回{left: 0, top: 0, width: 0, height: 0}。

可行解决方案 #

1. 在跳转触发时立即记录位置 #

不要等到组件销毁，而是在用户触发路由跳转的事件（如点击链接）时，同步获取元素位置并更新crossPageState：

<!-- Card.svelte -->
<a on:click={recordPosition} href="/your-target-route">跳转</a>
<div bind:this={cardEl}>卡片内容</div>

<script>
  let cardEl;

  function recordPosition() {
    const rect = cardEl.getBoundingClientRect();
    crossPageState.set({
      left: rect.left,
      top: rect.top,
      width: rect.width,
      height: rect.height
    });
  }
</script>

2. 监听路由变化提前捕获 #

利用SvelteKit的page store监听路由切换，在路由开始变化时（组件尚未销毁）获取元素位置：

<!-- Card.svelte -->
<script>
  import { page } from '$app/stores';
  import { onMount } from 'svelte';

  let cardEl;
  let hasRecorded = false;

  onMount(() => {
    const unsubscribe = page.subscribe(() => {
      if (!hasRecorded) {
        hasRecorded = true;
        const rect = cardEl.getBoundingClientRect();
        crossPageState.set({
          left: rect.left,
          top: rect.top,
          width: rect.width,
          height: rect.height
        });
      }
    });

    return unsubscribe;
  });
</script>

<div bind:this={cardEl}>卡片内容</div>

3. 临时克隆元素保留位置（不推荐） #

如果必须在destroy阶段操作，可临时克隆元素获取位置信息，但该方法可能引发内存泄漏，仅作临时方案：

<!-- Card.svelte -->
<script>
  let cardEl;

  function recordOnDestroy() {
    const clone = cardEl.cloneNode(true);
    document.body.appendChild(clone);
    const rect = clone.getBoundingClientRect();
    crossPageState.set({
      left: rect.left,
      top: rect.top,
      width: rect.width,
      height: rect.height
    });
    document.body.removeChild(clone);
  }
</script>

<div bind:this={cardEl} on:destroy={recordOnDestroy}>卡片内容</div>

内容的提问来源于stack exchange，提问作者SAC.Aiden