コンテンツにスキップ
- 標準 HTML ファースト — ネイティブの
button・input・dialog・popover が第一の API です。
→ テンプレートがすでに出力している要素にクラスを足すだけです — ウィジェットへの書き換えは不要で、ブラウザの挙動(フォーカス、フォーム、Escape)はそのまま手に入ります。
- Light DOM ファースト — Shadow DOM は使いません。htmx 属性もフォームも普通に動きます。
→ htmx のセレクタも、CSS の上書きも、label の
for も実際のマークアップに届きます — シャドウ境界の裏に隠れるものはありません。
- セマンティックなクラス — 長いユーティリティクラスの羅列ではなく
hc-button。
→ テンプレートは読みやすく、差分も追いやすくなります: コピーして回すユーティリティ文字列ではなく、クラス 1 つがコンポーネントを名指しします。
- 状態は HTML 属性に —
data-*、aria-*、ネイティブ属性がスタイリングを駆動します。
→ サーバが異なる属性で再レンダリングすれば見た目も追従します — クライアント側で照合すべき状態はありません。
- ネットワークは htmx の責務 — ビヘイビアは
fetch() をラップしません。
→ すべてのリクエストは data-hx-* としてマークアップに見えています — HC がデバッグの必要な隠れた fetch を発行することはありません。
- ビヘイビアは小さく — 確認、トースト、ダイアログを閉じる、フォーカス管理。
→ JS が読み込まれる前でも(なくても)ページは描画され、送信できます — ビヘイビアはあくまで強化であり、ページを支える柱にはなりません。
- DTCG トークンが視覚上の唯一の情報源 — CSS はカスタムプロパティを消費します。
→ 自分のスタイルシートで
--hc-* 変数を上書きすればリブランドできます — リビルドも、キットの CSS のフォークも不要です。
- マクロは任意 — すべてのマクロは展開後の HTML をドキュメント化します。
→ 展開後の HTML はいつでもそのままテンプレート言語にコピーできます — マクロは近道であって、ロックインには決してなりません。