【要約】HTML Living Standard の今。2 年前に書いた記事から、HTML 仕様はどこまで進化したのか？ [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
フロントエンド開発者は、複雑なUI挙動を実現するために、多大なJavaScript（JS）の実装を強いられてきた。
- ・アコーディオンの排他制御やダイアログの高度な制御に、個別のJSロジックが必要。
- ・JSへの依存によるバンドルサイズの増大と、初期表示速度への悪影響。
- ・アクセシビリティ（a11y）を担保するための、追加のコード記述コスト。
// Approach
HTML Living Standardの進化を活用し、UI制御を「命令的」なJSから「宣言的」なマークアップへと移行する手法が示されている。
- ・
<details name="...">を用いた、JSなしでの排他的アコーディオン実装。 - ・
command/commandfor属性による、popoverやdialogの宣言的な操作。 - ・
appearance: base-selectと<selectedcontent>による、自由度の高いセレクトボックス構築。 - ・
interpolate-sizeを組み合わせた、CSSのみでのスムーズな開閉アニメーション。
// Result
新仕様の導入により、開発者はJSへの依存を最小限に抑え、軽量で堅牢なUIを構築できる。
- ・JSコードの削減による、バンドルサイズの軽量化と初期表示速度の向上。
- ・ブラウザ標準機能の利用による、アクセシビリティ（a11y）の自動的な向上。
- ・
headingoffset等による、コンポーネントの見出しレベルの動的な文脈調整。
Senior Engineer Insight
> UI制御が「命令的」から「宣言的」へシフトしている点は極めて重要だ。JS依存を減らすことは、バンドルサイズの削減だけでなく、a11yの自動担保にも直結する。ただし、headingoffsetのように、DOMの構造的直感性を損なう仕様には注意が必要だ。また、新仕様はブラウザ実装状況に差があるため、caniuseでの検証は必須である。仕様を能動的に追う習慣が、低レイテンシなフロントエンド構築の鍵となる。