スクリプトレス静的レンダリング
キットのマークアップを JavaScript なしで描画するコンシューマが
あります: サンドボックス化されたエディタキャンバス(意図的に不活性に
した allow-scripts なしの iframe)、静的 HTML プレビュー、サーバ
サイドのスクリーンショット/PDF レンダリング、印刷。このページは
そのコンシューマ層向けの契約です。
静止状態はマークアップ + CSS から
Section titled “静止状態はマークアップ + CSS から”設計上、ほぼすべての behavior コンポーネントは、behavior なしで 初期化後の静止時の見た目に到達します。状態はマークアップにあり、 スタイリングはネイティブプリミティブに寄りかかっているからです:
- ネイティブの「既定で隠れる」プリミティブ — メニュー・
ポップオーバー・ツールチップ・ホバーカード・コンボボックス・
ナビメニューは
popover属性、ダイアログ・ドロワー・コマンド パレットは<dialog>、コラプシブルとアコーディオンは<details>。 いずれもスクリプトゼロで「閉じた状態」で静止します。 - 状態属性が CSS を駆動 — ツリーの枝は
aria-expanded="false"で折りたたまれ、タブのスタイルはaria-selectedに基づき、条件付き フィールドは初期hiddenをサーバサイドで描画し (conditional-fields レシピの 指示どおり)、タブの文書化マークアップは非アクティブパネルをhidden/hidden="until-found"で隠します。
文書化された静止マークアップを描画すれば、スクリプトレスのページは 初期化済みページの静止時と同じに見えます。
data-hc-static — 正準の静止状態を強制する
Section titled “data-hc-static — 正準の静止状態を強制する”behavior による状態の調停に依存しているテンプレート(サーバ側で
hidden を描画していないパネル、behavior が構築するクローム)向けに、
静止表現の強制をオプトインできます: 任意の祖先(キャンバスルート、
<body> など)に data-hc-static を付けてください。CSS で表現できる
範囲で、スタイルシートが正準の静止状態を適用します:
- タブ — 最初の
.hc-tabs__panelだけが表示され、既定選択の 先頭タブと一致します。 - カレンダー — 空の
.hc-calendarシェルが、何もない状態に 潰れる代わりにコンポーネントの枠を保ちます(グリッド自体は behavior が構築するため CSS では表現できません)。
data-hc-static は表示専用です: behavior を追加せず、外せば(または
behavior を初期化すれば)通常動作に戻ります。
staticSafe — 正直さのフラグ
Section titled “staticSafe — 正直さのフラグ”マシンマニフェストの
各 components[] エントリは staticSafe を持ちます: 文書化された
静止マークアップのスクリプトレス描画が、初期化済みコンポーネントの
静止時と同じに見えるなら true。false はちょうど 4 つ —
キャンバスは推測せずに「近似プレビュー」のバッジを付けられます:
| コンポーネント | 理由 |
|---|---|
hc-calendar | グリッドは空シェルから behavior が構築(data-hc-static で枠は保持)。 |
hc-carousel | スライドは描画・スクロールできるが、ページネーションドットは behavior が構築。 |
hc-chart | テーブルフォールバックが設計上のスクリプトレス状態 — データは読めるが、チャートではない。 |
hc-code | 読み取り専用面は純 CSS だが、編集可能フィールドはハイライトなしの textarea に劣化。 |
curl -s https://ingcreators.com/hypermedia-components/api/manifest.json \ | jq -r '.components[] | select(.staticSafe | not) | .block'