Svelte / SvelteKit

Svelte は仮想 DOM レイヤーを介さずに属性を直接 DOM に渡すため、カスタム要素との相性が良いです。SvelteKit（SSR）では、onMount 内で CDN を読み込むか、browser チェックでガードしてください。

@wink/elements npm package TypeScript 型定義付きで CDN バンドルをインストールおよび読み込みします。

インストール

npm install @wink/elements

SvelteKit — ルートレイアウト

src/routes/+layout.ts

import { browser } from '$app/environment';
import { load as loadWink } from '@wink/elements';

export function load() {
  if (browser) {
    loadWink({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  }
}

または、+layout.svelte の onMount 内で読み込む方法：

src/routes/+layout.svelte

<script>
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  onMount(() => {
    load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  });
</script>

<slot />

コンポーネントでの使用

Svelte は不明な属性をすべて直接 DOM に渡すため、追加の設定は不要です：

<script>
  export let layoutId = 'YOUR_LAYOUT_ID';
</script>

<main>
  <wink-content-loader layout="HOTEL" id={layoutId} />
  <wink-lookup />
</main>

Svelte 5（runes 構文）

<script lang="ts">
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  let { layoutId }: { layoutId: string } = $props();

  onMount(() => {
    load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  });
</script>

<wink-content-loader layout="HOTEL" id={layoutId} />

環境変数

SvelteKit は PUBLIC_ プレフィックスが付いた変数のみをブラウザに公開します：

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

SSR レンダリング

サーバーサイドレンダリング中に <wink-*> 要素をレンダリングしないでください。カスタム要素はブラウザの customElements レジストリに登録されますが、サーバーには存在しません。{#if browser} でラップするか、onMount 内でのみ load() を呼び出してください。

<script>
  import { browser } from '$app/environment';
</script>

{#if browser}
  <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
{/if}

素の Svelte（Vite、SvelteKit なし）

src/App.svelte

<script>
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  onMount(() => {
    load({ clientId: import.meta.env.VITE_WINK_CLIENT_ID });
  });
</script>

<wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />

さらに読む

• Web Components リファレンス
• @wink/elements npm package