実践：エディタでも壊れないインタラクティブUI
アコーディオン／タブ／スライダーをCustom Elementで実装し、アクセシビリティ・エディタ再描画・設定連動を満たせる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、アコーディオン・タブ・スライダーをCustom Elementで作り、キーボード操作とエディタの再描画に耐える形にできるようになります。
受託では、どのテーマにもあるこの3つを「JS無しで動くHTML」を土台に作ると、Theme Checkも通り、手戻りが減ります。
アコーディオンはどう作るか
<details> / <summary>を土台にして、JS無しで開閉が動く形にします。
「1つだけ開く」という制御だけを、JSで足します。detailsのtoggleイベントはバブルしません（親要素には伝わりません）。
親で受けるなら、capture（第3引数のtrue）で受けます。
タブはどう作るか
role="tablist" / tab / tabpanelとaria-selectedを付け、矢印キーで移動できるようにします。
フォーカスの見た目は消しません。
スライダーはどう作るか
scroll-snapとボタンで作り、prefers-reduced-motion（動きを減らす設定）が有効なら自動再生を止めます。
エディタでブロックを選択したら、該当スライドへ移動します（shopify:block:select）。
自動再生や間隔は、schemaの設定をdata-属性で渡し、Custom Elementが読みます。
LiquidをJSに埋め込みません。
完成と言える条件は
条件は3つです。
キーボードだけで操作できること。
Section Rendering後も動くこと（connectedCallbackで初期化します）。
そして、Theme Checkが通ることです。
次は演習で、「1つだけ開く」アコーディオンを作ってみましょう。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。