<details name> による排他的アコーディオンの実現

<!-- これは NG な事例です -->
<section>
	<h2>フレームの特徴</h2>

	<details name="frame-characteristics" open="">
		<summary>材料</summary>
		<p>材料は...</p>
	</details>

	<!-- ↓ `open` 属性が指定されているが、実際は開かれない -->
	<details name="frame-characteristics" open="">
		<summary>サイズ</summary>
		<p>サイズは...</p>
	</details>
</section>

<!--
`checked` 属性のないラジオボタングループの例
初期表示ではいずれも選択されていないが、一度どれかを選択すると「何も選択していない状態」には戻せない
-->
<p role="radiogroup">
	<label><input type="radio" name="lang" value="ja" /> 日本語</label>
	<label><input type="radio" name="lang" value="en" /> 英語</label>
	<label><input type="radio" name="lang" value="po" /> ポロロッカ語</label>
</p>

<script type="module">
	for (const detailsElement of document.querySelectorAll('details')) {
		await new Promise((resolve) => setTimeout(resolve, 1000)); // 動作状況を分かりやすくするため1秒間待機する

		detailsElement.open = true;
	}
</script>

<section>
	<h2>フレームの特徴</h2>

	<!-- ↓ 一度開かれる（`open` 属性が設定される）が、すぐに閉じられる（1秒後に `open` 属性が除去される） -->
	<details name="frame-characteristics">
		<summary>材料</summary>
		<p>材料は...</p>
	</details>

	<!-- ↓ 最終的にこちらのみが開かれる（1秒後に `open` 属性が設定される） -->
	<details name="frame-characteristics">
		<summary>サイズ</summary>
		<p>サイズは...</p>
	</details>
</section>