【CSS】セレクトボックスのプルダウンをデザインできるselectmenuが便利すぎた。

## はじめに
みなさんは、`<select>` タグを使う時、`<option>` をいい感じのデザインしたいと思ったことはないでしょうか？

多くの方は、妥協して、`<select>` タグを使うか、ライブラリーを使うか、
`<div>`・`<button>`などを使いWAI-ARIA補完するなどで実装しているのではないでしょうか？

実は、[Open UI](https://open-ui.org/)から提出された、セレクトボックスのプルダウンをデザインするための草案が、
Google Chrome チームとMicrosoft Edge チームの協力で実験的な機能として、`<selectmenu>` が公開されました。

https://chromestatus.com/feature/5737365999976448

そのため、この記事では　`<selectmenu>`　の具体的な内容の紹介と実装方法の解説を行います。

## 動作環境
`<selectmenu>` は、まだ実験的なものであるため、限られた環境で再現できます。
そのため、`<selectmenu>` が動いているのを確認したい方は次のようにお願いします。

ぜひ、環境を整えて、この記事をご覧いただけると嬉しいです。

1. 以下のブラウザでのみ確認できます。 ダウンロードお願いします。
    - [ChromeのCanaryバージョン](https://www.google.com/intl/ja/chrome/canary/)
    - [EdgeのCanaryバージョン](https://www.microsoftedgeinsider.com/ja-jp/download/canary)
2. about:flagsページを開いて `Experimental Web Platform features` を `enabled` にしてください。

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ae3d6dbb-4ade-ba0d-34af-29451e12957f.png)



## `<selectmenu>`
`<selectmenu>` は、デザインのカスタマイズができる `<select>` 要素です。

*※ 2022年現在は、まだ実験的な機能のため、ChromeとEdgeのCanaryバージョンでのみ使うことができます。*


### `<selectmenu>`の構造を理解する。
`<selectmenu>` にデザインを当てるためには、`<selectmenu>` の内部構造を理解することが必要です。

`<selectmenu>` の内部構造は↓こうなっています。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/52dff328-3df6-9710-f4d3-efc29cb9f768.png)

- **`<selectmenu>`**
    - ボタンとリストボックスを含むルート要素です。
- **`<button>`**
    - `<listbox>` を見えるようにするためのトリガーとなる要素です。
    - このボタンを押すことで、プルダウンが表示されます。
- **`<selected-value>`**
    - 現在選択されているオプションの値を表示する要素です。
    - この要素は、必ずしも`<button>` 内に配置する必要はありません。
- **`<listbox>`**
    - `<option>`と`<optgroup>`を含むWrapperです。
- **`<optgroup>`**
    - `<option>`をオプションのラベルと一緒にグループ化している要素です。
- **`<option>`**
    - ユーザーが選択できる値を表している要素です。
    - `<selectmenu>` には、1つ以上の `<option>` が必要です。


### `<selectmenu>`の基本的な使い方。
#### HTML
`<selectmenu>`は、`<select>` タグ同様に、
子要素に `<option>`タグで、選択肢を記載することで、使えるようになります。
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/655b3870-9bcf-0396-aa8e-3210671da4ef.png)
↑この例では、`<selectmenu>` の中にOption1~3の3つの選択肢を作っています。
`class="sample"` は、CSSでスタイルを当てるのに使います。

<details><summary>サンプルコードはこちらからコピーできます。</summary><div>

```sample.html
<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>
```
</div></details>
　

#### CSS
`<selectmenu>` にデザインを当てるには、疑似要素 の`::part()`で、`<selectmenu>`の内部構造を指定することで、デザインを変更することができます。
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/79231ffa-8065-c507-a41f-252ff11cbf6f.png)
↑この例では、`<selectmenu>` の listboxの構成要素にスタイルを当てています。
<details><summary>サンプルコードはこちらからコピーできます。</summary><div>

```sample.css
.sample::part(listbox) {
    color: white;
    background-color: red;
}
```
</div></details>

## サンプル
2022年現在、`<selectmenu>` はまだ実験的な機能のため、ChromeとEdgeのCanaryバージョンでのみ使うことができます。

ChromeとEdgeのCanaryバージョンをダウンロードしてご確認ください。

### サンプル ①
<p class="codepen" data-height="300" data-default-tab="html" data-slug-hash="LYrNaXp" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/LYrNaXp">
  Selectmenu①</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ChromeとEdgeのCanaryバージョンでは、↓こんな感じに見えます。
![画面収録 2022-11-03 23.39.42_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/cc5a4941-9585-c4b0-8c52-38413c9bfce5.gif)

### サンプル ②
<p class="codepen" data-height="300" data-default-tab="html" data-slug-hash="xxzOawb" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/xxzOawb">
  Selectmenu①</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ChromeとEdgeのCanaryバージョンでは、↓こんな感じに見えます。
![画面収録 2022-11-03 23.39.42_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c1dad2aa-40ae-7aae-ec2c-1caacdf630ee.gif)

## まとめ
今回は、`<selectmenu>` について紹介しました。

`<selectmenu>` は、まだまだ実験的なものですが、今まではデザインを妥協したり、デザインを当てるためにWAI-ARIAやJavaScriptでごちゃごちゃしたりとしていたことを考えると、早く主要ブラウザで対応していただけると嬉しいです。

実装された暁には、selectタグやライブラリーを使っていたところなどは、全部 `<selectmenu>` に置き換えたいですね


---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510

## ref
https://chromestatus.com/feature/5737365999976448

https://open-ui.org/components/select