<details>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	追加情報または操作項目を開閉するdisclosure widget
Categories	Flow content、Interactive content、Palpable content
Context	Flow contentが期待される場所
Content model	1個のsummary要素に続くFlow content
Content attributes	Global attributes、name、open
DOM interface	HTMLDetailsElement。open IDL attributeを持つ

Disclosureとsummaryの判定

最初のsummary element childが、そのdetailsのsummaryになります。summaryがない場合、user agentは独自のlegend（たとえば「Details」）を提供できます。開閉対象の内容は、summary以外の残りの子孫です。

<details>
  <summary>実装条件を確認する</summary>
  <p>ここが追加情報または操作項目です。</p>
</details>

summaryのcontent modelはPhrasing contentで、heading contentを任意に混在させられます。ただし、開閉のラベルとして使う情報は、閉じた状態でも内容を推測できる短い文字列に保つほうが、読み手と支援技術の確認に向いています。

open状態とactivation

openはboolean attributeです。属性が存在すればsummaryと追加内容を表示し、存在しなければsummaryだけを表示します。summaryのactivationによって、user agentは親detailsのopen属性を設定または削除します。

const details = document.querySelector('details');

details.open;            // open属性を反映するboolean
details.toggleAttribute('open');

details.addEventListener('toggle', (event) => {
  console.log(event.oldState, event.newState);
});

open属性の変更では、toggle eventがqueueされます。短時間に連続して状態を変更した場合、notification taskはcoalesceされ、すべての中間状態について個別にeventが発火するとは限りません。属性値の変更、現在の表示、eventのタイミングを同じものとして扱わないことが重要です。

nameによる排他的グループ

同じtreeにあり、空でない同じ値のname属性を持つdetailsは、同じdetails name groupになります。グループ内で1つを開くと、他の開いている要素のopen属性が削除されます。ページの初期markupに同じグループのopen要素を複数置くことはできません。

同時に複数の内容を比較することが目的なら、排他的グループにしないほうが適切です。排他的なaccordionが利用者にとって便利か、内容を何度も開き直す負担になるかを、情報設計の条件として確認します。

Content modelと利用境界

構造	確認点
最初のsummary	開閉のsummaryまたはlegendとして扱われる
summary以外のFlow content	開いたときに表示される追加情報または操作項目
openなし	summaryだけが表示され、追加内容は閉じた状態
nameが同じ	同じtree・非空値の要素で排他的グループを形成する

detailsはdisclosure widgetを表すための要素です。tab widget、menu widget、footnote、dialogなど、異なる意味や相互作用を持つUIを、見た目が似ているという理由だけでdetailsに置き換えません。

DOM Interface

HTMLDetailsElementのopenは、現在のopen attributeの有無をbooleanとして反映します。仕様上の開閉状態を読み取るときは、attribute文字列の値ではなく、このboolean状態とhasAttribute()の意味を分けて扱います。

const details = document.querySelector('#settings');
const summary = details.querySelector(':scope > summary');

details.open;
details.hasAttribute('open');
summary.textContent;

Fact / Evidence（主張 / 根拠）

要素の意味、summaryの判定、状態変更、排他的グループを、主張・条件・根拠位置に分けて記録します。ブラウザーの開閉UIとアクセシビリティツリーは、下のImplementation Evidenceへ分離しています。

Evidence

1. HTML Standard: The details element — 意味、categories、content model、open、name group、toggle通知、DOM interface
2. HTML Standard: The summary element — summaryの選択条件、content model、activation behavior
3. HTML Accessibility API Mappings — detailsとsummaryのrole、name、expanded stateの確認入口
4. Web Platform Tests: the-details-element — details、summary、open、name groupに関係するテスト群の入口

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。今回の追加時点では専用fixtureを実行していないため、未確認の項目を確認済みとは扱いません。

専用fixture: details-v1は次回の実測で、初期open、summary activation、IDL状態、toggle event、同一nameグループの相互排他を再現するための候補IDです。現時点ではfixtureファイルと実行結果を登録していません。

ネイティブの開閉表示、disclosure marker、キーボード操作、Accessibility treeの公開はuser agent・OS・状態に依存し得ます。1環境の観測を、すべてのブラウザーに共通する結果として登録しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、Content model、content attributes、DOM interface
• 確認済みsummaryの選択条件、openのboolean state、toggle notification、nameによる排他モデル
• 未完了Chrome・Firefox・Safariでのsummary activation、open反映、toggle event、name groupの比較
• 未完了disclosure marker、閉じた内容のrendering、動的挿入・移動・連続toggleの実装差異
• 未完了WPTの個別実行結果、HTML-AAMのmapping、Accessibility tree、支援技術別の観測

このページは初期Coverageです。仕様上の範囲を整理したものであり、すべてのブラウザーで同じ開閉表示・event timing・アクセシビリティAPI結果になること、またdetails要素全体の検証が完了したことを主張しません。

Related surface

初心者向けの開閉部品、summary、open、nameの使い方はYugienのdetails要素ページを参照してください。dialogとの意味・相互作用の境界はdialog要素、操作の意味はbutton要素、スクリプトとの境界はscript要素、フォーム送信との境界はform要素などの関連Topicでも確認できます。