<selectedcontent>要素

Technical Summary

Definition / Categories

項目	仕様上の整理	確認点
意味	selectで現在選択されているoptionの内容を、selectの先頭button内に示す	選択肢、選択状態、表示場所を別の要素・状態として扱う
Categories	なし	flow / phrasing / interactive contentなどのcategoryには属さない
Context	selectの先頭子button内	buttonはdrop-down selectの先頭子として許可される分岐
Content model	記述時は空。ブラウザーが選択中optionの子ノードを複製する	著者がselectedcontent内へ重複する表示内容を手書きしない
DOM Interface	HTMLSelectedContentElement	Element interfaceはあるが、専用のroleや表示用IDL属性を追加しない

使用コンテキスト

customizable selectでは、selectが選択モデル・フォーム値を保持し、先頭のbuttonが閉じた状態の表示を受け持ちます。selectedcontentはそのbutton内で選択中optionの内容を表示する場所です。buttonとselectedcontentは、通常ページ上に置かれた独立した操作ボタンとして扱いません。

<label for="plan">プラン</label>
<select id="plan" name="plan">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <div>
    <option value="basic"><span>基本</span></option>
    <option value="pro" selected>
      <span>プロ</span> <small>推奨</small>
    </option>
  </div>
</select>

appearance: base-selectはCSS Basic User Interface Module Level 4のスタイリング用機能です。HTMLの内容モデルとCSSの対応状況は別に評価し、実装されたブラウザー・版で表示、picker、操作を測定します。

複製と更新

HTML Standardの更新手順は、selectに複数選択のmultiple属性がある場合に何もせず戻ります。それ以外では、disabledでない子孫selectedcontentごとに、選択状態がtrueの最初のoptionを探します。該当optionがなければ内容を空にし、あればoptionの子ノードをdeep cloneして既存の子ノードと置き換えます。

きっかけ	仕様上の処理	測定上の注意
初期markupの接続	適切なselect内に接続された後、現在の選択から内容を更新する	HTMLパーサーの途中状態と接続後の状態を混同しない
選択状態の変更	select update notificationがdescendant selectedcontentを更新する	ユーザー操作とDOM APIによる選択変更を記録する
selected optionの子ノード変更	selection更新のたびにoptionの子ノードを複製する	子ノード編集それ自体による即時同期を仕様から推定しない
selectedcontentの移動	接続条件を再評価し、条件を満たす場合にmicrotaskで更新する	移動・挿入・切断の個別条件と結果を測定する
multiple select	select配下の更新処理はreturnする	validなcustomizable select構造と、WPT内の境界fixtureを区別する

label・valueとの境界

selectedcontentはoptionの表示用labelアルゴリズムやフォーム値を複製する機能ではありません。複製アルゴリズムが読むのは、選択中optionの子ノードです。

情報	定義される場所	selectedcontentとの関係
選択肢の表示名	optionのlabel属性、またはoption text	label属性の文字列をselectedcontentへコピーしない
表示markup	optionの子ノード	現在の選択に応じて子ノードを複製する
フォーム値	optionのvalue属性、またはoption value規則	複製対象ではない。フォーム送信はselect側で扱う
元optionのDOM	selectのoption list内	複製であり移動ではないため、元の選択肢は残る

rich optionのcontent model、label・valueの解決、datalist内optionのtext-only制約はoptionページを参照してください。

DOM Interface / disabledness

仕様のDOM interfaceはHTMLSelectedContentElementで、constructorを定義します。element自体に専用のcontent attributeやフォーム送信APIはありません。仕様内部には更新対象を制御するbooleanのdisabled stateがあり、optionまたは別のselectedcontentの子孫に入った場合などに更新を止めます。この内部stateを著者向けのdisabled属性やIDL propertyと混同しないでください。

const selectedcontent = document.querySelector('selectedcontent');
const select = selectedcontent.closest('select');
const selectedOption = select.selectedOptions[0];

selectedcontent instanceof HTMLSelectedContentElement;
selectedcontent.innerHTML;
select.value;

selectedcontent.innerHTMLはブラウザーが表示用に作った子ノードを読み取ります。アプリケーションの送信値はselect.valueから読み、表示markupを値として扱いません。

Fact / Evidence（主張 / 根拠）

仕様上の主張と実装観測を分けて記録します。WPTの版を特定できない実行結果はpartialとして扱い、ブラウザーAccessibility Treeの結果をplatform APIや支援技術の読み上げへ一般化しません。

Evidence

1. HTML Standard: The selectedcontent element — definition, interface, disabledness, copying, insertion, connection, movement, and update rules
2. HTML Standard: The select element — customizable select content model, option list, selection, picker, and form relationships
3. HTML Standard: The option element — option content model, label, value, and selectedness
4. HTML Accessibility API Mappings — platform mappings for HTML elements and attributes; it has no dedicated selectedcontent entry
5. Web Platform Tests: customizable select — selectedcontent selection, mutation, nesting, insertion, and removal cases

Implementation Evidence

実装Evidenceは、確認環境、テストファイル、結果、未実施範囲を記録します。日英ページのImplementation Evidence表はdocs/atlas/evidence-registry.jsonから生成します。

仕様の確認範囲と、ブラウザー、WPT、Accessibility Treeの実測範囲は別に扱います。

Coverage / Open Issues

• 仕様確認済み要素の意味、context、DOM interface、option子ノードの複製、label/value境界、multiple selectの更新境界
• 未完了複数ブラウザー・OSの挙動、複雑なoption markup、DOM mutationと移動の全条件、CSS appearanceとpicker表示
• 未完了HTML-AAMに専用mappingがない場合のplatform accessibility API、スクリーンリーダーの読み上げ・操作、WPT全範囲

このページは初期Coverageです。記録された結果は対象環境と選定テストに限られ、selectedcontent全体やすべての実装の検証完了を示しません。

Related surface

初心者向けの使い方はYugienのselectedcontentページを参照してください。選択モデルとcustomizable select全体はselectページ、表示markupとoptionのlabel/valueはoptionページ、先頭buttonのフォーム処理はbuttonページで確認できます。