Skip to content

Commit

Permalink
Update HTML parser changes in select explainer (#1077)
Browse files Browse the repository at this point in the history 
* Update HTML parser changes in select explainer

Based on discussion and developer feedback in the WHATWG issue about
HTML parser changes for <select>, we are not requiring <datalist> to be
added to the author HTML for most cases. This PR updates the explainer
to remove <datalist> in a bunch of places.

whatwg/html#10310

* say slotted instead of put in
  • Loading branch information
@josepharhar
josepharhar authored Aug 6, 2024
1 parent c6d7e72 commit f2809b2
Showing 1 changed file with 53 additions and 66 deletions.
119 changes: 53 additions & 66 deletions site/src/pages/components/customizableselect.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,18 +62,16 @@ And here the same `<select>` with opt ins to the new stylability behavior which

## HTML parser changes

The current behavior in the HTML parser for `<select>` is to remove all tags which aren't `<option>` or `<optgroup>`. We will change the HTML parser to allow `<datalist>` and `<button>` as a child of `<select>`, and allow any other content within that `<datalist>` or `<button>`. The `<button>` allows authors to replace the in-page button which opens the popup, and the `<datalist>` allows authors to replace the popup element containing the options.
The current behavior in the HTML parser for `<select>` is to remove all tags which aren't `<option>` or `<optgroup>`. We will change the HTML parser to allow almost all tags as descendants of `<select>`. Adding `<button>` as a child of `<select>` allows authors to replace the in-page button which opens the popup, and all other tags are slotted into the popover element containing the options.

Here is a basic example which uses the parser changes:
```html
<select style="appearance:base-select">
<button>
<selectedoption></selectedoption>
</button>
<datalist>
<option>one</option>
<option>two</option>
</datalist>
<option><img src="..." alt="">one</option>
<option><img src="..." alt="">two</option>
</select>
```

Expand All @@ -87,14 +85,11 @@ This example changes the fonts and colors of various parts of the button and lis
<div className="code-container">
```html
<select>
<datalist>
<option>one</option>
<option>two</option>
</datalist>
<option>one</option>
<option>two</option>
</select>
<style>
select datalist,
select button {
select, select::select-fallback-button {
font-family: monospace;
font-size: 12px;
}
Expand All @@ -117,20 +112,18 @@ This example adds "rich content" inside option elements in the form of country f
<div>
```html
<select>
<datalist>
<option>
<img src="usa.jpg" alt="flag of USA">
USA
</option>
<option>
<img src="germany.jpg" alt="flag of Germany">
Germany
</option>
<option>
<img src="spain.jpg" alt="flag of Spain">
Spain
</option>
</datalist>
<option>
<img src="usa.jpg" alt="flag of USA">
USA
</option>
<option>
<img src="germany.jpg" alt="flag of Germany">
Germany
</option>
<option>
<img src="spain.jpg" alt="flag of Spain">
Spain
</option>
</select>
```
</div>
Expand Down Expand Up @@ -177,14 +170,12 @@ This example uses the customizable `<select>` element with custom CSS to target
<button>
<selectedoption></selectedoption>
</button>
<datalist>
<option>
❤️ <span class=description>heart</span>
</option>
<option>
🙂 <span class=description>smile</span>
</option>
</datalist>
<option>
❤️ <span class=description>heart</span>
</option>
<option>
🙂 <span class=description>smile</span>
</option>
</select>
<style>
selectedoption .description {
Expand All @@ -203,40 +194,38 @@ selectedoption .description {

### Putting custom content in the listbox

This example has a `<datalist>` which enables it to put arbitrary content into the listbox rather than just `<option>`s.
This example has a complex structure wrapping the `<option>`s which is all slotted into the popover element.

<div className="code-image-container">
<div>
```html
<select>
<datalist>
<div class=container>
<div>
<optgroup label="1-2">
<option>one</option>
<option>two</option>
</optgroup>
</div>
<div>
<optgroup label="3-4">
<option>three</option>
<option>four</option>
</optgroup>
</div>
<div>
<optgroup label="5-6">
<option>five</option>
<option>six</option>
</optgroup>
</div>
<div>
<optgroup label="7-8">
<option>seven</option>
<option>eight</option>
</optgroup>
</div>
<div class=container>
<div>
<optgroup label="1-2">
<option>one</option>
<option>two</option>
</optgroup>
</div>
</datalist>
<div>
<optgroup label="3-4">
<option>three</option>
<option>four</option>
</optgroup>
</div>
<div>
<optgroup label="5-6">
<option>five</option>
<option>six</option>
</optgroup>
</div>
<div>
<optgroup label="7-8">
<option>seven</option>
<option>eight</option>
</optgroup>
</div>
</div>
</select>
<style>
.container {
Expand Down Expand Up @@ -286,11 +275,9 @@ Here is another example with custom content in the listbox: [codepen](https://co
<button><selectedoption id=myselectedoption></selectedoption></button>
<select selectedoptionelement=myselectedoption>
<button>⬇️</button>
<datalist>
<option>Create a merge commit</option>
<option>Squash and merge</option>
<option>Rebase and merge</option>
</datalist>
<option>Create a merge commit</option>
<option>Squash and merge</option>
<option>Rebase and merge</option>
</select>
```
</div>
Expand Down

0 comments on commit f2809b2

Please sign in to comment.