Skip to content

Commit f2809b2

Browse files
josepharharjosepharhar
authored
Update HTML parser changes in select explainer (#1077)
* 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
1 parent c6d7e72 commit f2809b2

1 file changed

Lines changed: 53 additions & 66 deletions

File tree

‎site/src/pages/components/customizableselect.mdx‎

Lines changed: 53 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -62,18 +62,16 @@ And here the same `<select>` with opt ins to the new stylability behavior which
6262

6363
## HTML parser changes
6464

65-
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.
65+
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.
6666

6767
Here is a basic example which uses the parser changes:
6868
```html
6969
<select style="appearance:base-select">
7070
<button>
7171
<selectedoption></selectedoption>
7272
</button>
73-
<datalist>
74-
<option>one</option>
75-
<option>two</option>
76-
</datalist>
73+
<option><img src="..." alt="">one</option>
74+
<option><img src="..." alt="">two</option>
7775
</select>
7876
```
7977

@@ -87,14 +85,11 @@ This example changes the fonts and colors of various parts of the button and lis
8785
<div className="code-container">
8886
```html
8987
<select>
90-
<datalist>
91-
<option>one</option>
92-
<option>two</option>
93-
</datalist>
88+
<option>one</option>
89+
<option>two</option>
9490
</select>
9591
<style>
96-
select datalist,
97-
select button {
92+
select, select::select-fallback-button {
9893
font-family: monospace;
9994
font-size: 12px;
10095
}
@@ -117,20 +112,18 @@ This example adds "rich content" inside option elements in the form of country f
117112
<div>
118113
```html
119114
<select>
120-
<datalist>
121-
<option>
122-
<img src="usa.jpg" alt="flag of USA">
123-
USA
124-
</option>
125-
<option>
126-
<img src="germany.jpg" alt="flag of Germany">
127-
Germany
128-
</option>
129-
<option>
130-
<img src="spain.jpg" alt="flag of Spain">
131-
Spain
132-
</option>
133-
</datalist>
115+
<option>
116+
<img src="usa.jpg" alt="flag of USA">
117+
USA
118+
</option>
119+
<option>
120+
<img src="germany.jpg" alt="flag of Germany">
121+
Germany
122+
</option>
123+
<option>
124+
<img src="spain.jpg" alt="flag of Spain">
125+
Spain
126+
</option>
134127
</select>
135128
```
136129
</div>
@@ -177,14 +170,12 @@ This example uses the customizable `<select>` element with custom CSS to target
177170
<button>
178171
<selectedoption></selectedoption>
179172
</button>
180-
<datalist>
181-
<option>
182-
❤️ <span class=description>heart</span>
183-
</option>
184-
<option>
185-
🙂 <span class=description>smile</span>
186-
</option>
187-
</datalist>
173+
<option>
174+
❤️ <span class=description>heart</span>
175+
</option>
176+
<option>
177+
🙂 <span class=description>smile</span>
178+
</option>
188179
</select>
189180
<style>
190181
selectedoption .description {
@@ -203,40 +194,38 @@ selectedoption .description {
203194

204195
### Putting custom content in the listbox
205196

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

208199
<div className="code-image-container">
209200
<div>
210201
```html
211202
<select>
212-
<datalist>
213-
<div class=container>
214-
<div>
215-
<optgroup label="1-2">
216-
<option>one</option>
217-
<option>two</option>
218-
</optgroup>
219-
</div>
220-
<div>
221-
<optgroup label="3-4">
222-
<option>three</option>
223-
<option>four</option>
224-
</optgroup>
225-
</div>
226-
<div>
227-
<optgroup label="5-6">
228-
<option>five</option>
229-
<option>six</option>
230-
</optgroup>
231-
</div>
232-
<div>
233-
<optgroup label="7-8">
234-
<option>seven</option>
235-
<option>eight</option>
236-
</optgroup>
237-
</div>
203+
<div class=container>
204+
<div>
205+
<optgroup label="1-2">
206+
<option>one</option>
207+
<option>two</option>
208+
</optgroup>
238209
</div>
239-
</datalist>
210+
<div>
211+
<optgroup label="3-4">
212+
<option>three</option>
213+
<option>four</option>
214+
</optgroup>
215+
</div>
216+
<div>
217+
<optgroup label="5-6">
218+
<option>five</option>
219+
<option>six</option>
220+
</optgroup>
221+
</div>
222+
<div>
223+
<optgroup label="7-8">
224+
<option>seven</option>
225+
<option>eight</option>
226+
</optgroup>
227+
</div>
228+
</div>
240229
</select>
241230
<style>
242231
.container {
@@ -286,11 +275,9 @@ Here is another example with custom content in the listbox: [codepen](https://co
286275
<button><selectedoption id=myselectedoption></selectedoption></button>
287276
<select selectedoptionelement=myselectedoption>
288277
<button>⬇️</button>
289-
<datalist>
290-
<option>Create a merge commit</option>
291-
<option>Squash and merge</option>
292-
<option>Rebase and merge</option>
293-
</datalist>
278+
<option>Create a merge commit</option>
279+
<option>Squash and merge</option>
280+
<option>Rebase and merge</option>
294281
</select>
295282
```
296283
</div>

0 commit comments

Comments
 (0)