snippetのレンダリング不良
Kenji Suzuki

Kenji Suzuki @suzulabo

About: Just a programmer

Location:
Japan, Hiroshima
Joined:
Aug 17, 2025

snippetのレンダリング不良

Publish Date: Aug 20
0 0
2025-06-26 
let pageSnippet = $derived.by(() => {
  if (!notificationStatus.supported) {
    if (isIOS()) {
      return unsupportedIOS;
    } else {
      return unsupported;
    }
  }

  return supported;
});
Enter fullscreen mode Exit fullscreen mode 
{#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()}
Enter fullscreen mode Exit fullscreen mode

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

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

unsupportedとunsupportedIOSが混じってる感じ

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

Comments 0 total

    Add comment