snippetのレンダリング不良

2025-06-26

---

let pageSnippet = $derived.by(() => {
  if (!notificationStatus.supported) {
    if (isIOS()) {
      return unsupportedIOS;
    } else {
      return unsupported;
    }
  }

  return supported;
});

{#snippet unsupported()}
  <div class="unsupported">
    <div class="icon">🥺</div>
    <div>{$LL.unsupportedNotification()}</div>
  </div>
{/snippet}

{#snippet unsupportedIOS()}
  <div class="unsupported-ios">
    <div>{$LL.unsupportedNotificationIOS()}</div>
    <a class="button" href="/notification" target="_blank">{$LL.iOSNotificationSetupLink()}</a>
  </div>
{/snippet}

{#snippet supported()}
...

{/snippet}

{@render pageSnippet()}

上記のようなコードでunsupportedIOSが表示されるとき、リロードすると以下のようなレンダリングになった

<div class="unsupported s-fT52FcnnQnPx">
  <div class="icon s-fT52FcnnQnPx">
    iPhone、iPadをご利用の方は、通知を使えるようにするための設定が必要です。以下のボタンから手順をご確認ください。
  </div>
  <div class="s-fT52FcnnQnPx">通知を有効にする手順</div>
</div>

unsupportedとunsupportedIOSが混じってる感じ

SSR でunsupportedが表示されるのを止めたら回避できた。
snippet のバグのように思う。