Skip to content

Commit c270d8e

Browse files
authored
Add explainer: slotted options in customizable <select> (#1357)
Adds a new `SlottedOption/` explainer proposing that a customizable `<select>` (`appearance: base-select`) recognize `<option>`, `<optgroup>`, and its trigger `<button>` when they are slotted in from a web component, so they behave as if they were direct children of the `<select>`. Today a `<select>` only treats its direct DOM children as options. If you put a `<select>` in a component's shadow root and expose a `<slot>`, the slotted options are ignored and the dropdown is empty. The only options today are to sync options with a `MutationObserver` or rebuild the control by hand, which is a lot of code and is usually less accessible than the native control. Discussion in WHATWG HTML issue: whatwg/html#11535
1 parent 1f800d4 commit c270d8e

2 files changed

Lines changed: 497 additions & 0 deletions

File tree

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ we move them into the [Alumni section](#alumni-) below.
105105
| [Network Efficiency Guardrails](PerformanceControlOfEmbeddedContent/neg-explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/Network%20Efficiency%20Guardrails">![GitHub issues by-label](https://img.shields.io/github/issues/MicrosoftEdge/MSEdgeExplainers/Network%20Efficiency%20Guardrails?label=issues)</a> | [New Issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=network-efficiency-guardrails.md) | WICG |
106106
| [Conditional Tracing for LoAF](ConditionalTracing/explainer-for-loaf.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/Conditional%20Tracing%20for%20LoAF">![GitHub issues by-label](https://img.shields.io/github/issues/MicrosoftEdge/MSEdgeExplainers/Conditional%20Tracing%20for%20LoAF?label=issues)</a> | [New Issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=conditonal-tracing-loaf.md) | Web Perf |
107107
| [CSS Linked Parameters](SVG/CSSLinkedParameters/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/CSS%20Linked%20Parameters">![GitHub issues by-label](https://img.shields.io/github/issues/MicrosoftEdge/MSEdgeExplainers/CSS%20Linked%20Parameters?label=issues)</a> | [New issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=goldenboy777&labels=CSS%20Linked%20Parameters&template=css-linked-parameters.md&title=%5BCSS+Linked+Parameters%5D+%3CTITLE+HERE%3E) | CSS |
108+
| [Slotted Options in Customizable Select](SlottedOption/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/Slotted%20Option">![GitHub issues by-label](https://img.shields.io/github/issues/MicrosoftEdge/MSEdgeExplainers/Slotted%20Option?label=issues)</a> | [New issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?labels=Slotted%20Option&title=%5BSlotted+Option%5D+%3CTITLE+HERE%3E) | HTML |
108109

109110
# Brainstorming 🧠
110111

0 commit comments

Comments
 (0)